Question

如果页面顶部有一个绝对定位（位置：固定）栏，就像许多网站一样，它会破坏Page Down按钮（以及Page Up）的行为。而不是Page Down会让您在屏幕顶部留下一行左右的文本，而这些文本之前位于屏幕的底部，以便继续阅读更容易，有一点点的截止非常烦人。 Here is a contrived example of this.有没有办法解决这个问题（除了避免页面顶部的固定位置栏）？

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

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

我找到了someone else already asking this question，但似乎他得到的唯一答案就是有人误解了这个问题。希望我的问题，包括一个例子，更清楚，有人可以帮助我。

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>

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

1 个答案: