CSS 删除浏览器中滚动时的反弹,位置问题:固定 div
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/21209223/
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
Remove bounce on scroll in browser, issue with position:fixed div
提问by Rob
I'm trying to remove the bounce when scrolling in chrome. You'll notice the top white black is fixed and behind the second yellow block as desired.
我正在尝试在 chrome 中滚动时消除反弹。您会注意到顶部的白色黑色已根据需要固定在第二个黄色块的后面。
What I need to do is remove the scroll to reveal the grey background in the browser without preventing the scroll over the top white block. Hope it makes sense
我需要做的是移除滚动条以在浏览器中显示灰色背景,而不会阻止滚动条越过顶部的白色块。希望这是有道理的
HTML
HTML
<div class="project">
</div>
<div id="content">
<div class="warface">
</div><!-- END warface -->
</div><!-- END content -->
回答by 3dgoo
Bounce scroll in the browser is a feature of some versions of iOS / macOS.
浏览器中的弹跳滚动是某些版本的 iOS / macOS 的一项功能。
To prevent it from happening on a website we can use the following:
为了防止它发生在网站上,我们可以使用以下方法:
CSS
CSS
html, body {
height: 100%;
overflow: hidden;
}
#main-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
HTML
HTML
<body>
<div id="main-container">
...
</div>
</body>
回答by Crashalot
There's a simpler answer suggested here for a related question: OSX - disable inertia scroll for "single-page" webapp
对于相关问题,这里建议了一个更简单的答案:OSX - 禁用“单页”webapp 的惯性滚动
body {
overflow: hidden;
}