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

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

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

HTML

<body>
    <div id="mainContainer">
        ...
    </div>
</body>

Demo

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

body {
    overflow: hidden;
}

来源：https://stackoverflow.com/questions/21209223/remove-bounce-on-scroll-in-browser-issue-with-positionfixed-div

标签

css

google-chrome

overflow

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!