Remove bounce on scroll in browser, issue with position:fixed div

Question

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

enter image description here

could you please be a little bit more clear or provide a fiddle of what you have tried? — sree, Jan 27 '14 at 05:42

3dgoo · Accepted Answer · 2020-05-17T22:13:45.300

62

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

edited May 17 '20 at 22:13

answered Jan 21 '14 at 01:03

3dgoo

15,716
6
46
58

Unknown · Answer 2 · 2021-01-24T21:58:27.153

49

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.

edited Jan 24 '21 at 21:58

answered Jan 24 '21 at 13:50

Unknown

819
9
17

Much simpler and exactly what I was looking for. – Buttars May 21 '21 at 05:35
2

Appears now supported in Safari. – jackfischer Nov 10 '22 at 16:34

score 4 · Answer 3 · answered Jun 25 '19 at 02:57

4

There's a simpler answer suggested here for a related question: OSX - disable inertia scroll for "single-page" webapp

body {
    overflow: hidden;
}

answered Jun 25 '19 at 02:57

Crashalot

33,605
61
269
439

19

Then you can't scroll. – jorisw Sep 05 '20 at 11:02
Just in the middle of fiddling with this. It seems like you can still scroll, but you need your container `div` element to have `overscroll-y: auto;` – Chuck Taylor Mar 03 '23 at 03:33

score 4 · Answer 4 · answered Jun 21 '21 at 14:08

Just use this property on the body tag:

body{
overscroll-behavior: none;
}

<html>
<body>
<div>
    <h1>Lorem ipsum dolor.</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi recusandae assumenda veritatis dolorum minima deleniti accusantium optio incidunt excepturi ipsum? Recusandae praesentium ullam minima autem minus necessitatibus aperiam neque. Non sequi quibusdam perferendis magnam ab dicta omnis. Reiciendis earum ipsum adipisci voluptas ipsa rerum ipsam dignissimos vitae tempore enim saepe pariatur dicta officia odio a quasi amet magni id hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi recusandae assumenda veritatis dolorum minima deleniti accusantium optio incidunt excepturi ipsum? Recusandae praesentium ullam minima autem minus necessitatibus aperiam neque. Non sequi quibusdam perferendis magnam ab dicta omnis. Reiciendis earum ipsum adipisci voluptas ipsa rerum ipsam dignissimos vitae tempore enim saepe pariatur dicta officia odio a quasi amet magni id hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi recusandae assumenda veritatis dolorum minima deleniti accusantium optio incidunt excepturi ipsum? Recusandae praesentium ullam minima autem minus necessitatibus aperiam neque. Non sequi quibusdam perferendis magnam ab dicta omnis. Reiciendis earum ipsum adipisci voluptas ipsa rerum ipsam dignissimos vitae tempore enim saepe pariatur dicta officia odio a quasi amet magni id hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi recusandae assumenda veritatis dolorum minima deleniti accusantium optio incidunt excepturi ipsum? Recusandae praesentium ullam minima autem minus necessitatibus aperiam neque. Non sequi quibusdam perferendis magnam ab dicta omnis. Reiciendis earum ipsum adipisci voluptas ipsa rerum ipsam dignissimos vitae tempore enim saepe pariatur dicta officia odio a quasi amet magni id hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi recusandae assumenda veritatis dolorum minima deleniti accusantium optio incidunt excepturi ipsum? Recusandae praesentium ullam minima autem minus necessitatibus aperiam neque. Non sequi quibusdam perferendis magnam ab dicta omnis. Reiciendis earum ipsum adipisci voluptas ipsa rerum ipsam dignissimos vitae tempore enim saepe pariatur dicta officia odio a quasi amet magni id hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi recusandae assumenda veritatis dolorum minima deleniti accusantium optio incidunt excepturi ipsum? Recusandae praesentium ullam minima autem minus necessitatibus aperiam neque. Non sequi quibusdam perferendis magnam ab dicta omnis. Reiciendis earum ipsum adipisci voluptas ipsa rerum ipsam dignissimos vitae tempore enim saepe pariatur dicta officia odio a quasi amet magni id hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi recusandae assumenda veritatis dolorum minima deleniti accusantium optio incidunt excepturi ipsum? Recusandae praesentium ullam minima autem minus necessitatibus aperiam neque. Non sequi quibusdam perferendis magnam ab dicta omnis. Reiciendis earum ipsum adipisci voluptas ipsa rerum ipsam dignissimos vitae tempore enim saepe pariatur dicta officia odio a quasi amet magni id hic.</p>
</div>
</body>
</html>

score 3 · Answer 5 · answered Dec 03 '20 at 17:13

Modified the solution to not create a new div in the page

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

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
}

Worked for me but I didn't know if it's a good way to do

score 2 · Answer 6 · answered Jul 19 '21 at 21:35

2

Placing this rule on the body tag doesn't work in Firefox on MacOS for me, but placing it on the html tag does.

html {
  overscroll-behavior: none;
}

answered Jul 19 '21 at 21:35

tobius

825
1
8
10

Remove bounce on scroll in browser, issue with position:fixed div

6 Answers6

Linked