时间戳

首页 > 解决方案 > 修复背景图像附件后，覆盖滚动不可点击

html - 修复背景图像附件后，覆盖滚动不可点击

问题描述

我有一个奇怪的问题，即覆盖元素无法使用鼠标单击和拖动来滚动，滚动条根本不会移动。滚轮似乎工作正常且符合预期。

我做了一些调试，发现只有当背景图像附件设置为固定时才会导致这种行为，但是我无法找到解决方案。

示例代码如下所示，有什么想法吗？

html,body{
  height:100%;
  overflow:hidden;
}
.container{
  background: url(https://image.freepik.com/free-vector/abstract-blue-geometric-shapes-background_1035-17545.jpg) no-repeat center center fixed;
  background-size: cover;
  position:relative;
  display:block;
  min-height: 100%;
  height: auto;
  width:100%;
  z-index:1;
}

.container-div-content{
  width:100%;
  position:relative;
  display:block;
  height:1800px;
}
.overlay{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, .2);
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;

}

.overlay-div{
  position:relative;
  width:90%;
  height:300px;
  z-index:1001;
  overflow:auto;
  background: white;
  margin-left: auto;
  margin-right: auto;
}

.overlay-div-content{
  position:relative;
  display:block;
  height:600px;
  width:60%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      
    </style>
  </head>
  <body>
    <div class="overlay">
      <div class="overlay-div">
        <div class="overlay-div-content"></div>
      </div>
    </div>
    <div class="container">
      <div class="container-div-content"></div>
    </div>
  </body>
</html>

感谢您对代码段进行编辑，但该问题似乎并未出现在代码段中。

标签： htmlcssbackground-image

解决方案

对，如果其他人碰巧有类似的问题，这不是代码问题，实际上是 Chrome 错误。

复制这个问题

  1. 在谷歌浏览器中打开上面的 HTML
  2. 打开开发工具并切换到移动设备
  3. 复制此选项卡
  4. 退出选项卡 2 上的开发工具
  5. 现在选项卡 2 上的滚动条会出现这个奇怪的问题，滚动条是可见的，您可以使用鼠标滚轮移动它，但是滚动条不可点击，您无法单击 + 向上或向下拖动它。

我不确定这是否算作一个答案，但我已经发布它以防其他人有类似的问题，如果这不是一个可接受的答案，请继续删除它。

推荐阅读