CSS 正文设置为 overflow-y:hidden 但页面在 Chrome 中仍可滚动
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19236349/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Body set to overflow-y:hidden but page is still scrollable in Chrome
提问by Cécile Boucheron
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.
我overflow-y
在 Chrome 中遇到了该属性的问题。即使我已将其设置为hidden
,我仍然可以使用鼠标滚轮滚动页面。
Here is my code:
这是我的代码:
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>
Does anybody know how to block the vertical scrolling in Chrome?
有人知道如何在 Chrome 中阻止垂直滚动吗?
Thanks!
谢谢!
采纳答案by Cécile Boucheron
I finally found a way to fix the issue so I'm answering here.
我终于找到了解决问题的方法,所以我在这里回答。
I set the overflow-y
on the #content
instead, and wrapped my steps in another div. It works.
我设置overflow-y
的#content
,而是和包裹在内部的div我的脚步。有用。
Here is the final code:
这是最终的代码:
<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;
}
回答by RhinoWalrus
Setting a height on your body and html of 100% should fix you up. Without a defined height your content is not overflowing, so you will not get the desired behavior.
在你的身体上设置高度和 100% 的 html 应该可以解决你的问题。如果没有定义的高度,您的内容不会溢出,因此您将无法获得所需的行为。
html, body {
overflow-y:hidden;
height:100%;
}
回答by Scheintod
What works for me on /FF and /Chrome:
在 /FF 和 /Chrome 上什么对我有用:
body {
position: fixed;
width: 100%;
height: 100%;
}
overflow: hidden
just disables display of the scrollbars. (But you can put it in there if you like to).
overflow: hidden
只是禁用滚动条的显示。(但如果你愿意,你可以把它放在那里)。
There is one drawback I found: If you use this method on a page which you want only temporarily to stop scrolling, setting position: fixed
will scroll it to the top.
This is because position: fixed uses absolute positions which are currently set to 0/0.
我发现有一个缺点:如果您在只想暂时停止滚动的页面上使用此方法,则设置position: fixed
会将其滚动到顶部。这是因为 position: fixed 使用当前设置为 0/0 的绝对位置。
This can be repaired e.g. with jQuery:
这可以修复,例如使用 jQuery:
var lastTop;
function stopScrolling() {
lastTop = $(window).scrollTop();
$('body').addClass( 'noscroll' )
.css( { top: -lastTop } )
;
}
function continueScrolling() {
$('body').removeClass( 'noscroll' );
$(window).scrollTop( lastTop );
}
回答by dareapersven
Another solution I found to work is to set a mousewheelhandler on the inside container and make sure it doesn't propagate by setting its last parameter to false and stopping the event bubble.
我发现的另一个解决方案是在内部容器上设置一个鼠标滚轮处理程序,并通过将其最后一个参数设置为 false 并停止事件气泡来确保它不会传播。
document.getElementById('content').addEventListener('mousewheel',function(evt){evt.cancelBubble=true; if (evt.stopPropagation) evt.stopPropagation},false);
Scroll works fine in the inner container, but the event doesn't propagate to the body and so it does not scroll. This is in addition to setting the body properties overflow:hiddenand height:100%.
滚动在内部容器中工作正常,但事件不会传播到正文,因此它不会滚动。这是设置 body 属性overflow:hidden和height:100% 的补充。
回答by Maxi
Try this when you want to "fix" your body's scroll:
当你想“修复”你身体的滚动时试试这个:
jQuery('body').css('height', '100vh').css('overflow-y', 'hidden');
and this when you want to turn it normal again:
当您想再次将其恢复正常时:
jQuery('body').css('height', '').css('overflow-y', '');
回答by Gagan
Use:
用:
overflow: hidden;
height: 100%;
position: fixed;
width: 100%;
回答by Vikas Bidhuri
Find out the element which is larger than the body (element which is causing the page to scroll) and just set it's position to fixed. NOTE: I'm not talking to change the position of draggable elements. Draggable elements can be dragged out of body only when there's an element larger than body (mostly in width).
找出大于主体的元素(导致页面滚动的元素)并将其位置设置为固定。注意:我不是在谈论更改可拖动元素的位置。只有当元素大于 body(主要是宽度)时,可拖动元素才能被拖出 body。
回答by Milan Meuleman
Ok so this is the combination that worked for me when I had this problem on one of my websites:
好的,当我在我的一个网站上遇到此问题时,这是对我有用的组合:
html {
height: 100%;
}
body {
overflow-x: hidden;
}
回答by David
The correct answer is, you need to set JUST body to overflow:hidden. For whatever reason, if you also set html to overflow:hidden the result is the problem you've described.
正确答案是,您需要将 JUST body 设置为 overflow:hidden。无论出于何种原因,如果您还将 html 设置为 overflow:hidden,结果就是您所描述的问题。
回答by Giovanni Silveira
Technically, the size of your body
and html
are wider than the screen, so you will have scrolling. You will need to set margin:0;
and padding:0;
to avoid the scrolling behavior, and add some margin/padding to #content
instead.
从技术上讲,您的body
和html
比屏幕更宽,因此您将可以滚动。您需要设置margin:0;
并padding:0;
避免滚动行为,并添加一些边距/填充来#content
代替。