Page Down键可用性,页面顶部有固定的位置栏

Question

如果页面顶部有一个绝对定位(位置:固定)栏,就像许多网站一样,它会破坏Page Down按钮(以及Page Up)的行为.而不是Page Down会让您在屏幕顶部留下一行左右的文本,而这些文本之前位于屏幕底部,以便继续阅读,因此会有一些非常烦人的截止.这是一个人为的例子.有没有办法解决这个问题(除了避免在页面顶部固定位置栏)？

以下链接示例的源代码在下面重复以供后人使用:

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

我发现其他人已经在问这个问题,但似乎他得到的唯一答案就是有人误解了这个问题.希望我的问题,包括一个例子,更清楚,有人可以帮助我.

Answer 1

您必须检查 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>