CODEWITHSUNDEEP
cssgoogle-chromeoverflow
Rob
Rob

Reputation: 1495

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

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

Upvotes: 53

Views: 71433

Answers (7)

Sarah Schopick
Sarah Schopick

Reputation: 1

/* Prevent overscroll, scroll bounce, page overflow, */

html, 
body {  
/* Added to prevent overflow and scroll bounce
*/
    height: 100%;
    width: 100% !important;
    overflow: hidden;
    overscroll-behavior: none;
    overflow-behavior: contain; 
}

body {
/* LAYOUT */
    margin: 0 auto; 
    min-height: 100vh;
    
/** Prevent overflowing the page */ 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 100vw !important;
    -webkit-scrollbar {
        display: auto;
        background: transparent !important;
    }
    scroll-snap-type: y mandatory;
    scroll-snap-align: start;
    scroll-behavior: smooth;
    }

/* Scrollbar */

  body::-webkit-scrollbar {
    color: currentcolor;
    background: transparent;
    height: calc(100% - 5px);
    display: auto;
    width: 5px;
}

body::-webkit-scrollbar-track {
    background: transparent !important;
    height: calc(100% - 5px);
    visibility: hidden;
}

body::-webkit-scrollbar-thumb {
    border-right: none;
    border-left: none;
}

body::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-bottom: 10px;
}

body::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-top: 10px;
}

Upvotes: 0

3dgoo
3dgoo

Reputation: 15794

Please see Unknown's answer for a better solution.

The following is left here for historical purposes:

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

Upvotes: 61

tobius
tobius

Reputation: 855

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

Upvotes: 3

Harshit Kedia
Harshit Kedia

Reputation: 134

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>

Upvotes: 6

Unknown
Unknown

Reputation: 919

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.

Upvotes: 58

Dizuite
Dizuite

Reputation: 41

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

Upvotes: 3

Crashalot
Crashalot

Reputation: 34513

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

body {
    overflow: hidden;
}

Upvotes: 4

Related Questions