Удалить отскок на прокрутке в браузере, задать позицию: fixed div

Я пытаюсь удалить отскок при прокрутке в хроме. Вы заметите, что верхний белый черный цвет закреплен и позади второго желтого блока по желанию.

Что мне нужно сделать, это удалить прокрутку, чтобы показать серый фон в браузере, не мешая прокрутке над верхним белым блоком. Надеюсь, что это имеет смысл

HTML

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

<div id="content">

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

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

Ответ 1

Прокрутка отказов в браузере - это особенность некоторых версий 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>

демонстрация

Ответ 2

Здесь предлагается более простой ответ на связанный вопрос: OSX - отключить прокрутку инерции для "одностраничного" веб-приложения.

body {
    overflow: hidden;
}