9

If you have a absolutely positioned (position: fixed) bar at the top of a page, as many websites do, it breaks the behavior of the Page Down button (and also Page Up). Instead of Page Down leaving you with a line or so of text at the top of your screen that was previously at the bottom of the screen to make continued reading easier, there is a little bit of cutoff that is very annoying. Here is a contrived example of this. Is there any way of working around this problem (besides avoiding fixed position bars at the top of pages)?

The source code of the above linked example is repeated 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>

I found someone else already asking this question, but it seems that the only answer he got was from someone misunderstanding the problem. Hopefully my question, with an example included, is clearer and someone can help me.

Community
  • 1
  • 1
dumbmatter
  • 9,351
  • 7
  • 41
  • 80

1 Answers1

2

You'd have to check for the Page Down/Up key onkeydown (or onkeyup) which isn't great if your page requires users to type (could be lots of overhead). That said, you could try the following. I haven't tested this much, so I don't know how robust it is. The key is to keep track of the scroll position and make adjustments based on the offsetHeight of the "bar" div. Here's the code:

<!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>
squidbe
  • 1,012
  • 1
  • 8
  • 13
  • 2
    This code handles Page Down well. Page Up isn't quite right, though, and Space and Shift-Space aren't handled at all. The trouble is that there are lots of ways to tell the browser to scroll by pages. – Peeja May 21 '12 at 14:55
  • @Peeja, not sure what problems you're having with Page Up, but it's working fine for me. For (Shift-)Space, you'd simply add tests for those key codes, e.g., `if key === 32`. (If you're testing for many keys, might as well use a switch statement.) – squidbe Jun 21 '12 at 17:24
  • At the size I'm at, I see "12" at the bottom of the window. If I press Page Down, I see "12" at the top, just below the red. If I then press Page Up, I see "3" at the top, rather than the top of the content. – Peeja Jun 21 '12 at 22:22