问题描述
|
如果您像许多网站一样在页面顶部有一个绝对定位(固定的位置)的栏,它将破坏Page Down按钮(以及Page Up)的行为。向下翻页不但不会在屏幕顶部留下一行或大约一行文本,而在文本顶部之前会在屏幕底部留下一行或多行文本,以使继续阅读变得更容易,但有些中断却很烦人。这是一个人为的例子。有什么方法可以解决此问题(除了避免在页面顶部放置固定位置的条)?
为了后代,下面重复上述链接示例的源代码:
<!doctype html>
<html lang=\"en\">
<head>
<style type=\"text/css\">
#bar {
background: #f00;
height: 200px;
position: fixed;
top: 0;
width: 100%;
}
p {
margin-top: 250px;
}
</style>
</head>
<body>
<div id=\"bar\">IMPORTANT STUFF GOES HERE</div>
<p>When you press Page Down (and then Page Up the other way),some of the list items are cut off below the red bar.</p>
<ol><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li><li></ol>
</body>
</html>
我发现其他人已经在问这个问题,但是看来他唯一的答案是有人误解了这个问题。希望我的问题(包括示例)更加清楚,有人可以帮助我。
解决方法
您必须检查Page Down / Up键onkeydown(或onkeyup),如果您的页面需要用户输入(可能会产生大量开销),这不是很好。也就是说,您可以尝试以下方法。我还没有做太多测试,所以我不知道它有多健壮。关键是要跟踪滚动位置并根据\“ bar \” div的offsetHeight进行调整。这是代码:
<!doctype html>
<html>
<title></title>
<head>
<style type=\"text/css\">
html,body {
height:100%;
}
body {
margin:0;
padding:0;
}
#bar {
background: #f00;
height: 200px;
position: fixed;
top: 0;
width: 100%;
}
p {
margin-top: 250px;
}
li {
margin:2em 0;
}
#divScroll {
overflow:auto;
height:100%;
width:100%;
}
</style>
<script language=\"javascript\">
function adjustScroll(event) {
var ds = document.getElementById(\'divScroll\');
var b = document.getElementById(\'bar\')
var e = event || window.event;
var key = e.which || e.keyCode;
if(key === 33) { // Page up
var remainingSpace = ds.scrollHeight - ds.scrollTop;
setTimeout(function() {
ds.scrollTop = (remainingSpace >= ds.scrollHeight - b.offsetHeight) ? 0 : (ds.scrollTop + b.offsetHeight);
},10);
}
if(key === 34) { // Page down
var remainingSpace = ds.scrollHeight - ds.scrollTop - ds.offsetHeight;
setTimeout(function() {
ds.scrollTop = (remainingSpace <= b.offsetHeight) ? ds.scrollHeight : (ds.scrollTop - b.offsetHeight);
},10);
}
}
document.onkeydown = adjustScroll;
</script>
</head>
<body>
<div id=\"bar\">IMPORTANT STUFF GOES HERE</div>
<div id=\"divScroll\">
<p>When you press Page Down (and then Page Up the other way),some of the list items are cut off below the red bar.</p>
<ol>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
</ol>
</div>
</body>
</html>