如何防止空白“跳动”滚动到页面顶部和底部后

问题描述：

很多网站都有这种情况，如果您一直向上滚动，就会产生这种反弹效果，就好像您的页面从浏览器窗口的顶部弹回，从而暴露了窗口顶部的空白区域。

A lot of websites have this thing that if you scroll all the way up you get this "bounce" effect as if your page bounced off the top of your browser window revealing white space at the top of the window.

如果向下滚动，则会出现同样的反弹效果。

The same situation if you scroll down, you get the same exact "bounce" effect.

丑陋的，如果你的页眉和页脚有背景色。

This bounce can look very ugly if your header and footer has a background colour.

我如何摆脱这种影响？

How do i get rid of this effect?

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

答

I had similar issue this worked for me.

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

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

如何防止空白“跳动”滚动到页面顶部和底部后

相关推荐