滚动到页面顶部和底部后如何防止空白“反弹”答案

【问题标题】：How to prevent white space "bounce" after scrolling to the top of the page and the bottom滚动到页面顶部和底部后如何防止空白“反弹”
【发布时间】：2015-12-06 16:21:15
【问题描述】：

很多网站都有这样的东西，如果你一直向上滚动，你会得到这种“弹跳”效果，就好像你的页面从浏览器窗口的顶部弹开，在窗口顶部显示空白。

同样的情况，如果你向下滚动，你会得到完全相同的“反弹”效果。

如果您的页眉和页脚有背景颜色，则此反弹可能会非常难看。

如何消除这种影响？

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

【问题讨论】：

这能回答你的问题吗？ Prevent "overscrolling" of web page

标签： html css

【解决方案1】：

所以，接受的答案对我不起作用。我必须使用https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

所以，

body {
    overscroll-behavior: none;
}

【讨论】：

这是在我的具体案例中有效的答案。将其设置为 html 就足够了。

【解决方案2】：

最好使用默认背景

html,body{
     overscroll-behavior: auto;
     background: var(--color-bg-header);
}

【讨论】：

【解决方案3】：

我有类似的问题，这对我有用。

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

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

【讨论】：

【解决方案4】：

最终对我来说最好的是直接在 <html> 标签上添加 style="overflow:hidden"（通过 css 没有这样做）。

这当然会阻止页面本身在滚动时移动，但在我的情况下，它是一个网络应用程序，其中各个元素在页面内独立滚动，所以这就是我正在寻找的效果。

在移动设备上，我在媒体查询中通过overflow:auto !important 恢复。

【讨论】：

【解决方案5】：

您可以通过应用以下样式来移除该效果：

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

这使得内容只能在你体内滚动。

【讨论】：

由于某种原因这不起作用。下面的答案确实做到了，将他标记为正确。