正文设置为 overflow-y:hidden 但页面在 Chrome 中仍可滚动答案

【问题标题】：Body set to overflow-y:hidden but page is still scrollable in Chrome正文设置为 overflow-y:hidden 但页面在 Chrome 中仍可滚动
【发布时间】：2013-10-14 16:56:28
【问题描述】：

我在 Chrome 中遇到了 overflow-y 属性的问题。即使我将它设置为hidden，我仍然可以使用鼠标滚轮滚动页面。

这是我的代码：

html,
body {
  overflow-y: hidden;
}

#content {
  position: absolute;
  width: 100%;
}

.step {
  position: relative;
  height: 500px;
  margin-bottom: 500px;
}

<body>
  <div id="content">
    <div class="step">this is the 1st step</div>
    <div class="step">this is the 2nd step</div>
    <div class="step">this is the 3rd step</div>
  </div>
</body>

有人知道如何在 Chrome 中阻止垂直滚动吗？

谢谢！

【问题讨论】：

只想链接这篇相关的帖子，并为仍在寻找它的人提供答案：link。

标签： css google-chrome scroll scrollbar overflow

【解决方案1】：

好的，当我在我的一个网站上遇到此问题时，这是对我有用的组合：

html {
    height: 100%;
}

body {
    overflow-x: hidden;
}

【讨论】：

【解决方案2】：

找出比正文大的元素（导致页面滚动的元素）并将其位置设置为固定。注意：我不是在谈论改变可拖动元素的位置。可拖动元素只有在元素大于body（主要是宽度）时才能被拖出body。

【讨论】：

【解决方案3】：

用途：

overflow: hidden;
height: 100%;
position: fixed;
width: 100%;

【讨论】：

【解决方案4】：

当你想“修复”你身体的卷轴时试试这个：

jQuery('body').css('height', '100vh').css('overflow-y', 'hidden');

当你想再次恢复正常时：

jQuery('body').css('height', '').css('overflow-y', '');

【讨论】：

【解决方案5】：

我发现另一个可行的解决方案是在内部容器上设置一个 mousewheel 处理程序，并通过将其最后一个参数设置为 false 并停止事件气泡来确保它不会传播。

document.getElementById('content').addEventListener('mousewheel',function(evt){evt.cancelBubble=true;   if (evt.stopPropagation) evt.stopPropagation},false);

滚动在内部容器中工作正常，但事件不会传播到主体，因此它不会滚动。这是除了设置主体属性 overflow:hidden 和 height:100%。

【讨论】：

一旦你在 body 上设置了这些属性，就不需要那个函数了。

【解决方案6】：

在 /FF 和 /Chrome 上什么对我有用：

body {

    position: fixed;
    width: 100%;
    height: 100%;

}

overflow: hidden 只是禁用滚动条的显示。（但如果你愿意，你可以把它放在那里）。

我发现了一个缺点：如果您在只想暂时停止滚动的页面上使用此方法，则设置 position: fixed 会将其滚动到顶部。这是因为 position: fixed 使用当前设置为 0/0 的绝对位置。

这可以修复，例如使用 jQuery：

var lastTop;

function stopScrolling() {
    lastTop = $(window).scrollTop();      
    $('body').addClass( 'noscroll' )          
         .css( { top: -lastTop } )        
         ;            
}

function continueScrolling() {                    

    $('body').removeClass( 'noscroll' );      
    $(window).scrollTop( lastTop );       
}

【讨论】：

这是一个很好的解决方案，但如果您将 iPhone 更改为横向并显示浏览器任务栏，则可能会被破坏。
这应该是最被接受的答案。通过一些调整，除了@Paddy 这里所说的之外，这解决了所有问题，但可能性很小，这是最干净的解决方案。无论谁遵循这一点，请记住添加一个名为 noscroll 的类，其位置固定且宽度和高度为 100%。

【解决方案7】：

正确答案是，您需要将 JUST body 设置为溢出：隐藏。无论出于何种原因，如果您还将 html 设置为 overflow:hidden ，结果就是您描述的问题。

【讨论】：

【解决方案8】：

我终于找到了解决问题的方法，所以我在这里回答。

我将overflow-y 设置在#content 上，并将我的步骤包装在另一个div 中。有用。

这是最终代码：

<body>
  <div id="content">
    <div id="steps">
       <div class="step">this is the 1st step</div>
       <div class="step">this is the 2nd step</div>
       <div class="step">this is the 3rd step</div>
     </div>
   </div>
</body>

#content {
  position:absolute;
  width:100%;
  overflow-y:hidden;
  top:0;
  bottom:0;
}
.step {
  position:relative;
  height:500px;
  margin-bottom:500px;
}

【讨论】：

会帮助我完全相反，如何使禁用滚动的页面在latimes.com/sports/soccer/… 1st remove hood 上可滚动：#reg-overlay{background-color:none!important}

【解决方案9】：

在你的身体和 100% 的 html 上设置一个高度应该可以解决你的问题。如果没有定义的高度，您的内容不会溢出，因此您将无法获得所需的行为。

html, body {
  overflow-y:hidden;
  height:100%;
}

【讨论】：

谢谢，但这并不能解决问题：/
如果您在 jsfiddle 中放一个示例并提供链接：(jsfiddle.net)，可能会更容易获得有用的答案。从提供的 sn-p 来看，这有点像猜谜游戏，什么“可能”修复它。
谢谢，但 jsFiddle 没有显示任何问题，并且滚动被我的代码禁用。该问题发生在浏览器窗口、仅限 Chrome 和 Mac 魔术鼠标中。
这也适用于 iPhone。如果出现 Safaris 工具栏，横向会有点脆弱，减少页面的内部宽度。

【解决方案10】：

从技术上讲，body 和 html 的大小比屏幕宽，因此您可以滚动。您需要设置 margin:0; 和 padding:0; 以避免滚动行为，并改为为 #content 添加一些边距/填充。

【讨论】：

您好乔瓦尼，感谢您的回复。不确定明白你的意思。你的意思是我应该设置 margin/padding:0;在 html 和 body 上？
正确，添加 html, body { margin:0;填充：0；溢出-y：隐藏； }
很遗憾这不起作用，我仍然可以在页面中滚动。
您可能需要将box-sizing:border-box; 添加到#content
等一下，您正在体验垂直滚动吗？ jsfiddle.net/9esqC 即使没有 box-sizing:border-box; 似乎也无法滚动