Menu
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.
285
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
