Page Down键的可用性和页面顶部的固定位置栏
|
如果您像许多网站一样在页面顶部有一个绝对定位（固定的位置）的栏，它将破坏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>
没有找到相关结果
已邀请:
1 个回复
薄响
<!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>