Menu
A lot of websites have this thing that if you scroll all the way up you get this "bounce" effect as if your page bounced off the top of your browser window revealing white space at the top of the window.
The same situation if you scroll down, you get the same exact "bounce" effect.
This bounce can look very ugly if your header and footer has a background colour.
How do i get rid of this effect?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <header></header> <div></div> <footer></footer> </body> </html> CSS
header { width: 100%; background-color: tomato; height: 140px; } div { height: 1000px; } footer { width: 100%; background-color: brown; height: 140px; } 
674
Approach: A simple solution to this problem is to set the value of the “overflow” property of the body element to “hidden” whenever the modal is opened, which disables the scroll on the selected element.
This can be avoided using body { margin: 0; } if suitable. In situation where you can't add this CSS the wrapper element is useful as the scrollbar is always fully visible.
If the value of this property is true , the scroll view bounces when it encounters a boundary of the content. Bouncing visually indicates that scrolling has reached an edge of the content. If the value is false , scrolling stops immediately at the content boundary without bouncing. The default value is true .
I had similar issue this worked for me.
html { overflow: hidden; height: 100%; } body { overflow: auto; height: 100%; } So, the accepted answer doesn't work for me. I have to use https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
So,
body { overscroll-behavior: none; } 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
