Geek Answers Handbook

Page Down key usability with a fixed positional line at the top of the page

If you have an absolutely positioned (position: fixed) panel at the top of the page, as many websites do, this violates the behavior of the Down button (as well as the Page Up). Instead of letting Page Down leave you with text at the top of the screen that was previously at the bottom of the screen to make reading easier, there is a bit of clipping that is very annoying. Here is a contrived example of this. Is there a way around this problem (in addition, avoiding fixed positions at the top of the pages)?

The source code of the above example is given below for posterity:

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

- , , , , - . , , , , - .

+5
1

/ onkeydown ( onkeyup), , , ( ). , . , , . , offsetHeight "bar" div. :

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

More articles:


All Articles