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

Question

Welcome To Ask or Share your Answers For Others

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

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

609 views

1 Answer

深蓝 · Answer 1 · 2021-10-23T18:34:55+0000

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

Categories

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

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags