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

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

html css

Html “如何防止空白”；“反弹”；滚动到页面顶部和底部后,html,css,Html,Css,很多网站都有这样的功能，如果你一直向上滚动，你会得到这种“反弹”效果，就像你的页面从浏览器窗口顶部反弹，在窗口顶部显示空白一样同样的情况下，如果你向下滚动，你会得到同样精确的“反弹”效果如果页眉和页脚有背景色，这种反弹看起来会很难看如何消除这种影响 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </he

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

同样的情况下，如果你向下滚动，你会得到同样精确的“反弹”效果

如果页眉和页脚有背景色，这种反弹看起来会很难看

如何消除这种影响

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

  <header></header>

  <div></div>

  <footer></footer>

</body>
</html>

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

正文{
身高：100%；
宽度：100%；
溢出：自动；
}

我也遇到过类似的问题，这对我来说很有效

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

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

所以，被接受的答案对我不起作用。我必须使用

所以

最适合我的是直接在

标签上添加

style=“overflow:hidden”

（通过css没有做到）

这当然会阻止页面本身在滚动中移动，但在我的例子中，它是一个web应用程序，其中各个元素在页面中独立滚动，所以这就是我想要的效果

在手机上，我通过

overflow:auto！重要信息

在媒体查询中。

由于某些原因，此操作不起作用。下面的答案是正确的，这回答了你的问题吗？这是在我的具体案例中起作用的答案。将其设置为html就足够了。

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

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

html, body {
    overscroll-behavior: none;
}