html - 滚动到页面顶部和底部后如何防止空白 "bounce"

标签 html css

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

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

如果您的页眉和页脚具有背景颜色,则此弹跳看起来会非常难看。

如何消除这种影响?

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

最佳答案

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

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

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

关于html - 滚动到页面顶部和底部后如何防止空白 "bounce",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32500876/

相关文章:

jquery - jQuery 的 space 和 > 选择器有什么区别?

python - 选择带有美丽汤的嵌套元素

html - 试图将视频放到我的 html 和 css 页面

jquery - 使用 jquery 更改工具提示 div 的 css

html - 将箭头图像直接放在段落中的句子之后

php - 使用 html5 和 css3 配置 htmlpurifier

javascript - 如何正确设置div值

html - 使用 wkhtmltopdf 时字体不采用相同的字体系列名称

css - 每个属性 "(CSS 3.0): [property] is not a known CSS property name."的 Visual Studio 2015 验证警告

javascript - jquery 更改 tr 内的 div 背景