Question

当我点击缩略图时，它会在顶部打开一个div叠加框：

.view-overlay {
  display:none;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  overflow-y:scroll;
  background-color:rgba(0,0,0,0.7);
  z-index:999;
}

对于具有非浮动滚动条的浏览器，禁用使用overflow: hidden滚动会删除滚动条，从而导致内容向右移动一点以弥补额外空间。

我想将滚动条保留在那里，以免发生。有在线解决方案，但我找不到一个在所有浏览器中都能正常运行的解决方案。

https://stackoverflow.com/a/13891717/4774917 - 这个答案似乎在Chrome上运行良好，但会在Safari OSX 10.10上造成奇怪的错误行为。

https://stackoverflow.com/a/8701977/4774917 - 此答案会导致正文滚动回到顶部（Chrome）。

有什么解决方案：

a）打开叠加层时禁用正文滚动

b）保持身体保持原始滚动位置

c）将滚动条保留在那里，以便内容不会移动

d）在（大多数/所有）浏览器上工作而没有毛病行为吗？

示例：https://dribbble.com执行此操作，它似乎适用于我在其上测试过的浏览器（包括Safari），但没有出现故障行为。

Answer 1

一种非常简单有效的方法是不在主体本身中使用主要内容，而是使用叠加层作为兄弟姐妹的包装。使用此方法，您可以在必要时切换叠加层，而不会影响内容元素的滚动。

＆＃13;

var e = document.getElementById('overlay');
document.body.onclick = function() {
  e.style.display = (!e.style.display || e.style.display === 'block') ? 'none' : 'block';
};

＆＃13;

html,
body,
#content {
  height: 100%;
  margin: 0;
}
#content {
  overflow: auto;
}
#high {
  height: 800px;
}
#overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
}

＆＃13;

<div id="overlay"></div>
<div id="content">
  Long content resides in this container
  <div id="high"></div>
  And the long content ends here
</div>

＆＃13;

禁用正文滚动但不隐藏滚动条

1 个答案: