正文设置为overflow-y：隐藏，但页面仍然可以在Chrome中滚动 [英] Body set to overflow-y:hidden but page is still scrollable in Chrome
本文介绍了正文设置为overflow-y：隐藏，但页面仍然可以在Chrome中滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在Chrome中的overflow-y属性有问题。
即使我已将其设置为隐藏，仍然可以使用鼠标滚轮滚动页面。
I'm having an issue with the overflow-y property in Chrome. Even though I've set it to hidden, I can still scroll the page with the mouse wheel.
这是我的代码：
<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>
html, body {
overflow-y:hidden;
}
#content {
position:absolute;
width:100%;
}
.step {
position:relative;
height:500px;
margin-bottom:500px;
}
有没有人知道如何阻止Chrome中的垂直滚动？
Does anybody know how to block the vertical scrolling in Chrome?
谢谢！
推荐答案
我终于找到了解决问题的方法，在这里回答。
I finally found a way to fix the issue so I'm answering here.
我在 #content 上设置了 overflow-y code>代替，并把我的步骤在另一个div。有用。
I set the overflow-y on the #content instead, and wrapped my steps in another div. It works.
以下是最终代码：
<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;
}
这篇关于正文设置为overflow-y：隐藏，但页面仍然可以在Chrome中滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
