Página abajo usabilidad de la tecla con una barra de posición fija en la parte superior de una página

Si tiene una barra posicionada (posición: fija) en la parte superior de una página, como lo hacen muchos sitios web, se rompe el comportamiento de Page Down botón (y también RePág). En lugar de que Page Down lo deje con una línea de texto en la parte superior de la pantalla que estaba previamente en la parte inferior de la pantalla para facilitar la lectura continua, hay un poco de corte que es muy molesto. Here is a contrived example of this. ¿Hay alguna forma de evitar este problema (además de evitar barras de posición fijas en la parte superior de las páginas)?Página abajo usabilidad de la tecla con una barra de posición fija en la parte superior de una página

El código fuente del ejemplo vinculado anteriormente se repite a continuación para la posteridad:

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

He encontrado someone else already asking this question, pero parece que la única respuesta que obtuvo fue de alguien que la mala interpretación del problema. Espero que mi pregunta, con un ejemplo incluido, sea más clara y alguien me pueda ayudar.

Fuente

2011-06-18 dumbmatter

Debería verificar la tecla Av Pág/Arriba en el teclado (o en la tecla arriba), lo cual no es bueno si su página requiere que los usuarios escriban (podría haber muchos gastos generales). Dicho eso, podrías intentar lo siguiente. No he probado tanto, así que no sé cuán robusto es. La clave es hacer un seguimiento de la posición de desplazamiento y hacer ajustes en función de la altura de desplazamiento de la div "bar". Aquí está el código:

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

Fuente

2011-06-18 10:45:23 squidbe

Aquí está ese código en vivo: http://jsfiddle.net/bpMCE/ – Peeja

Este código maneja bien a Page Down. Sin embargo, Page Up no es del todo correcto, y Space y Shift-Space no se manejan en absoluto. El problema es que hay muchas maneras de decirle al navegador que se desplace por las páginas. – Peeja

@Peeja, no estoy seguro de qué problemas tiene con Page Up, pero está funcionando bien para mí. Para espacio (Shift), simplemente agregará pruebas para esos códigos clave, por ejemplo, 'if key === 32'. (Si está probando muchas teclas, también podría usar una declaración de cambio.) – squidbe

Página abajo usabilidad de la tecla con una barra de posición fija en la parte superior de una página

Respuesta

Cuestiones relacionadas