javascript - 禁用主体滚动但不隐藏滚动条

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;
}

对于具有非 float 滚动条的浏览器，使用 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

一种既简单又有效的方法是不在正文本身中包含主要内容，而是在覆盖层中放置一个同级包装器。使用这种方法，您可以在必要时切换叠加层，而不会影响内容元素的滚动。

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

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);
}

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