ページ上部の固定位置バーを使用したキー操作性の低下

ページの上部に絶対配置された（位置：固定）バーがあれば、多くのWebサイトがそうしているように、ページダウンボタンを押します（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を見つけたが、彼が得た唯一の答えは、問題を誤解人からだったようです。うまくいけば、私の質問は、例が含まれて、明確で誰かが私を助けることができます。

出典

2011-06-18 dumbmatter

あなたのページにユーザーが入力する必要がある（オーバーヘッドが多い）場合は、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>

出典

2011-06-18 10:45:23 squidbe

ここにコードがあります。http://jsfiddle.net/bpMCE/ – Peeja

このコードはページダウンをうまく処理します。しかし、Page Upはあまり適切ではなく、SpaceとShift-Spaceはまったく処理されません。問題は、ページにスクロールするようにブラウザに指示する方法がたくさんあることです。 – Peeja

@Peeja、あなたはPage Upでどんな問題が起きているのかよく分かりませんが、うまくいきます。（Shift-）Spaceの場合、これらのキーコードのテストを追加するだけです（たとえば、if key === 32）。（多くのキーをテストしている場合は、switch文を使用することもできます。） – squidbe

ページ上部の固定位置バーを使用したキー操作性の低下

答えて

関連する問題