Geek Answers Handbook

How to prevent a "bounce" space after scrolling at the top of the page and bottom

Many websites have such a thing that if you scroll all the way, you get this “bounce” effect, as if your page bounced from the top of your browser window, opening a space at the top of the window.

In the same situation, if you scroll down, you will get the exact “bounce” effect.

This bounce can look very ugly if your header and footer have a background color.

How to 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; }
+11
source share
4 answers

I had a similar problem, it worked for me.

 html { overflow: hidden; height: 100%; } body { height: 100%; overflow: auto; }
+26
source

So the accepted answer does not work for me. I have to use https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

So,

 html, body { overscroll-behavior: none; }
+1
source

You can remove this effect by applying the following style:

 body { height: 100%; width: 100%; overflow: auto; }

This makes the content only inside your body scrollable.

0
source

The best thing for me was to add style="overflow:hidden" directly to <html> (this did not happen through css).

This, of course, prevents the page itself from scrolling, but in my case it is a web application in which individual elements scroll independently inside the page, so this is exactly the effect I was looking for.

On the mobile phone, I returned via overflow:auto !important in the media query.

0
source

More articles:


All Articles