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

css google-chrome overflow
Rob picture Rob · Jan 18, 2014 · Viewed 40.9k times · Source

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

Answer

3dgoo picture 3dgoo · Jan 21, 2014

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

Related questions

Body set to overflow-y:hidden but page is still scrollable in Chrome

I'm having an issue with the overflow-y property in Chrome. Even though I've set it to hidden, I can still scroll the page with the mouse wheel. Here is my code: Does anybody know how to block the vertical scrolling …

Read More
overflow: hidden; doesn't work on Chrome with IFRAMEs?

I have an IFRAME with overflows hidden in the css and html. It works in Firefox, but not Chrome/Safari Why is this?

Read More
Webkit border-radius and overflow bug when using any animation/transition

I am having getting a weird bug when I use a combination of overflow, border-radius, and transition. I have a div with an img inside of it. The div has a border radius and overflow set to hidden. When I …

Read More