如何防止空白“跳动”滚动到页面顶部和底部后 [英] How to prevent white space "bounce" after scrolling to the top of the page and the bottom
本文介绍了如何防止空白“跳动”滚动到页面顶部和底部后的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
很多网站都有这种情况，如果您一直向上滚动，就会产生这种反弹效果，就好像您的页面从浏览器窗口的顶部弹回，从而暴露了窗口顶部的空白区域。
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;
}
这篇关于如何防止空白“跳动”滚动到页面顶部和底部后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
