CODEWITHSUNDEEP
htmlcss
Eli Himself
Eli Himself

Reputation: 904

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

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

Upvotes: 34

Views: 38735

Answers (7)

LM Tech
LM Tech

Reputation: 1

What worked for me was doing this:

html {
    overscroll-behavior: none;
}

This stopped the overscroll. If I did html,body it wouldn't work and remove all my 'blocks' apart from the front.

Upvotes: 0

Exchange_programming
Exchange_programming

Reputation: 473

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

Upvotes: 0

Polv
Polv

Reputation: 2208

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

Upvotes: 41

Atul Kumar
Atul Kumar

Reputation: 11

It's better to use default bg

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

Upvotes: 1

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

I had similar issue this worked for me.

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

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

Upvotes: 52

timraybould
timraybould

Reputation: 731

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.

Upvotes: -1

Domain
Domain

Reputation: 11808

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.

Upvotes: -2

Related Questions