通过将overflow：hidden隐藏到body来阻止对underling内容滚动。为什么不？

Question

问题是旧问题，解决方案也是旧问题：

• 在固定叠加层可见时阻止下身/文档滚动;

• 将overflow: hidden应用于正文;

围绕这个问题写了很多线程，但找不到真正的答案，因为我无法复制报告的问题。

overflow:hidden正文不被认为是一个很好的解决方案，因为有人说它会将页面滚动到顶部。但这不会发生在我身上：

https://jsfiddle.net/stratboy/cjsL2qhq/13/

前一段时间我也建立了一个真正的网站，应用了这种技术，我的客户或用户从未收到错误报告。

那么，为什么我不应该使用这个东西呢？还有其他好的理由吗？

有一篇文章（可能是其中之一）提出了另一种解决方案，但如果你想要修复标题则不起作用，因为滚动条将位于safari和explorer的标题下。上面的简单解决方案将起作用。

http://luxiyalu.com/how-to-prevent-body-from-scrolling/

所以我很好奇：我错过了什么吗？为什么我的工作正常？有没有隐藏的陷阱？

Answer 1

问题非常微妙，这可能只是可能出错的一小部分：

在研究时，我发现this article关于html和身体溢出。在那里，在部分内部＆＃34;妈妈，滚动条来自哪里？＆＃34;，显示以下图像：

这意味着，body本身默认不像html那么大，而body甚至应该展开以包含您拥有的任何内容。但是，这意味着overflow: hidden上的body实际上根本没有效果。

但正如你所经历的那样，情况并非奇怪。

人们可以在你的小提琴中检查文件正文，但显示滚动是，body始终scrollTop 0。

所以它不是真正滚动的body，而是html。 scrollTop上的html按预期变化。）

在下面更新的小提琴中，我展示了通过添加额外的css规则html { overflow: auto; }来覆盖您隐藏的身体溢出。

SCSS：

html {
  overflow: auto;
}

body{
  &.no-scroll{
    overflow:hidden;
  }
}


.main-box{
  position:relative;
  z-index:0;
  padding-top: 80px;
  background-color: #c3c3c3;
}

.main-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:10000;
  height: 80px;
  background-color: #0ee;
}

.main-content{
  position: relative;
  min-height:1200px;
  padding-top: 80px;
  background-color: #707;
  color: #fff;
}

.main-footer{
  height: 50px;
  background-color: #ee0;
}

.overlay{
  display: none; //temp
  position: fixed;
  z-index: 10000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,.3);
  color: #fff;

  &.visible{
    display: block;
  }
}

HTML：

<div class="main-header">
  header

  <button class="trigger">trigger overlay</button>
</div>

<div class="main-content">content</div>
<div class="main-footer">footer</div>
<div class="overlay">overlay</div>

JS：

$('.trigger').on('click', function(){
    $(document.body).toggleClass('no-scroll');
    $('.overlay').toggleClass('visible');
});

https://jsfiddle.net/cjsL2qhq/21/

因此，总而言之，我猜大多数浏览器都了解在身体上使用隐藏溢出的常见做法，尽管它没有任何意义。但是一些操纵/非传统的浏览器解释可能导致身体无法按照您习惯的方式进行处理。