Как предотвратить "отскок" пробела после прокрутки вверху страницы и нижней

Многие веб-сайты имеют такую вещь, что если вы прокрутите весь путь, вы получите этот эффект "отскока", как если бы ваша страница отскочила от верхней части окна вашего браузера, открыв пробел в верхней части окна.

В той же ситуации, если вы прокрутите вниз, вы получите точный эффект "отскока".

Этот отскок может выглядеть очень уродливым, если ваш верхний и нижний колонтитулы имеют фоновый цвет.

Как избавиться от этого эффекта?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <header></header>

  <div></div>

  <footer></footer>

</body>
</html>

CSS

header {
  width: 100%;
  background-color: tomato;
  height: 140px;
}

div {
  height: 1000px;
}

footer {
  width: 100%;
  background-color: brown;
  height: 140px;
}

Ответ 1

У меня была схожая проблема, это сработало для меня.

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}

Ответ 2

Итак, принятый ответ не работает для меня. Я должен использовать https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

Так,

html, body {
    overscroll-behavior: none;
}

Ответ 3

Вы можете удалить этот эффект, применив следующий стиль:

body {
  height: 100%;
  width: 100%;
  overflow: auto;
}

Ответ 4

Лучшим для меня оказалось добавление style="overflow:hidden" непосредственно в <html> (через css этого не произошло).

Это, конечно, предотвращает перемещение самой страницы по прокрутке, но в моем случае это веб-приложение, в котором отдельные элементы прокручиваются независимо внутри страницы, так что это именно тот эффект, который я искал.

На мобильном телефоне я вернулся через overflow:auto !important в медиа-запросе.