Menu
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.
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
<div class="project">
</div>
<div id="content">
<div class="warface">
</div><!-- END warface -->
</div><!-- END content -->
809
Bounce scroll in the browser is a feature of some versions of iOS / macOS.
To prevent it from happening on a website we can use the following:
CSS
html, body {
height: 100%;
overflow: hidden;
}
#main-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
HTML
<body>
<div id="main-container">
...
</div>
</body>
Demo
183
While the accepted answer works. Here is a simpler and updated version.
body {
overscroll-behavior-y: none;
}
It does however not work for IE and Safari which is unfortunate. Here is the browser support.
27
There's a simpler answer suggested here for a related question: OSX - disable inertia scroll for "single-page" webapp
body {
overflow: hidden;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
