我在 Chrome 中遇到了
overflow-yhidden这是我的代码：
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 中的垂直滚动吗？
谢谢！
将身体和 html 的高度设置为 100% 应该可以解决问题。如果没有定义的高度，您的内容就不会溢出，因此您将无法获得所需的行为。
html, body {
overflow-y:hidden;
height:100%;
}
我终于找到了解决问题的方法，所以我在这里回答。
我将
overflow-y#content这是最终代码：
<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;
}
在 /FF 和 /Chrome 上什么对我有用：
body {
position: fixed;
width: 100%;
height: 100%;
}
overflow: hidden我发现一个缺点：如果您在只想暂时停止滚动的页面上使用此方法，设置
position: fixed这可以修复，例如使用 jQuery：
var lastTop;
function stopScrolling() {
lastTop = $(window).scrollTop();
$('body').addClass( 'noscroll' )
.css( { top: -lastTop } )
;
}
function continueScrolling() {
$('body').removeClass( 'noscroll' );
$(window).scrollTop( lastTop );
}
我发现有效的另一个解决方案是在内部容器上设置一个 mousewheel 处理程序，并通过将其最后一个参数设置为 false 并停止事件气泡来确保它不会传播。
document.getElementById('content').addEventListener('mousewheel',function(evt){evt.cancelBubble=true; if (evt.stopPropagation) evt.stopPropagation},false);
滚动在内部容器中工作正常，但事件不会传播到主体，因此它不会滚动。这是除了设置主体属性 overflow:hidden 和 height:100%.
当你想“修复”你身体的卷轴时，试试这个：
jQuery('body').css('height', '100vh').css('overflow-y', 'hidden');
当你想再次恢复正常时：
jQuery('body').css('height', '').css('overflow-y', '');
用途：
overflow: hidden;
height: 100%;
position: fixed;
width: 100%;
body { overflow-x: hidden;}
这样，溢出将隐藏在 x 线上（水平），但您将能够垂直滚动。
找出比body大的元素（导致页面滚动的元素）并将其位置设置为固定。 注意：我不是在谈论更改可拖动元素的位置。仅当存在大于 body 的元素（主要是宽度）时，才可以将可拖动元素拖出 body。
正如@RhinoWalrus 指出的，
将你的身体和 html 的高度设置为 100% 应该可以解决你的问题。 如果没有定义的高度，您的内容就不会溢出，因此您将 没有得到所需的行为。
但是，他将正文高度设置为 100% 的修复并没有为我解决问题，因为我正文中的内容大于视口高度。相反，我使用了 100vh，它解决了我的问题：
body {
overflow-y:hidden;
height:100vh;
}
从技术上讲，您的
bodyhtmlmargin:0;padding:0;#content好的，当我在我的网站之一上遇到此问题时，这是对我有用的组合：
html {
height: 100%;
}
body {
overflow-x: hidden;
}
正确的答案是，你需要将JUST body设置为overflow:hidden。无论出于何种原因，如果您还将 html 设置为溢出：隐藏，结果就是您所描述的问题。