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

Question

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;
}

Does this answer your question? [Prevent "overscrolling" of web page](https://stackoverflow.com/questions/12046315/prevent-overscrolling-of-web-page) — cs95, Jun 19 '20 at 23:50

Shrinivas Pai · Accepted Answer · 2020-09-17T11:44:36.770

48

I had similar issue this worked for me.

html {
    overflow: hidden;
    height: 100%;
}

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

edited Sep 17 '20 at 11:44

answered Sep 10 '15 at 11:47

Shrinivas Pai

7,491
4
29
56

Doesn't work. Latest Chrome at date of this comment. Samsung Galaxy S22+. – Tom Jan 30 '23 at 06:58

score 28 · Answer 2 · edited Dec 09 '21 at 17:31

28

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;
}

edited Dec 09 '21 at 17:31

chug2k

5,106
2
25
30

answered Mar 28 '19 at 11:39

Polv

1,918
1
20
31

1

This is the answer that worked in my specific case. Setting it to html should be enough. – Yakko Majuri Oct 27 '20 at 15:37

score 1 · Answer 3 · answered Sep 28 '21 at 20:11

1

It's better to use default bg

html,body{
     overscroll-behavior: auto;
     background: var(--color-bg-header);
}

answered Sep 28 '21 at 20:11

Atul Kumar

11
1

score 0 · Answer 4 · edited Sep 08 '22 at 11:27

0

Neither of the top answers worked for me by themselves, but when combined it worked fine.

html {
  overflow: hidden;
  height: 100%;
}

body {
  overflow: auto;
  height: 100%;
  overscroll-behavior: none;
}

edited Sep 08 '22 at 11:27

Eric Aya

69,473
35
181
253

answered Sep 08 '22 at 09:34

Exchange_programming

454
7
19

timraybould · Answer 5 · 2019-05-16T02:13:33.353

-1

What ended up being best for me was adding style="overflow:hidden" directly on the <html> tag (via css didn't do it).

This of course prevents the page itself from moving on scroll, but in my case it's a web app where individual elements scroll independently within the page, so this is the effect I was looking for.

On mobile, I reverted back via overflow:auto !important in a media query.

edited May 16 '19 at 02:13

answered May 15 '19 at 15:20

timraybould

681
6
9

score -2 · Answer 6 · answered Sep 10 '15 at 11:43

-2

You can remove that effect by applying the following style:

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

This make the content only inside you body to be scroll-able.

answered Sep 10 '15 at 11:43

Domain

11,562
3
23
44

2

This did not work for some reason. The below answer did though, marking him as correct. – Eli Himself Sep 10 '15 at 11:56

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

6 Answers6