web-dev-qa-db-ja.com

ブラウザのスクロール時のバウンスを削除し、position：fixed divの問題

クロムでスクロールするときにバウンスを削除しようとしています。上部の白い黒が修正され、必要に応じて2番目の黄色のブロックの後ろにあることがわかります。

スクロールを削除して、ブラウザで灰色の背景を表示し、上部の白いブロックをスクロールしないようにする必要があります。それが理にかなっていると思います

[〜＃〜] html [〜＃〜]

<div class="project">
</div>

<div id="content">

    <div class="warface">   
    </div><!-- END warface -->

</div><!-- END content -->

enter image description here

cssgoogle-chromeoverflow
23
Rob

ブラウザのバウンススクロールは、iOS/macOSの一部のバージョンの機能です。

これがウェブサイトで発生しないようにするには、以下を使用できます。

[〜＃〜] 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>

デモ

38
3dgoo

関連する質問について、ここで提案されているより簡単な答えがあります： OSX-"単一ページ" webappの慣性スクロールを無効にする

body {
    overflow: hidden;
}
5
Crashalot