Recientemente aprendí sobre :target::before{content:'';display:block;height:--fixedHeaderHeight} que permite que los fragmentos se desplacen a su posición sin estar ocultos por un encabezado fijo alto. Es decir, si el encabezado tiene una altura de 200 px, el elemento con el ID especificado en la URL aparecerá justo debajo, en lugar de estar oculto detrás.
Sin embargo, tengo un problema similar en mi sistema de administración de pgup/pgdn. Regularmente paso las páginas hacia arriba y hacia abajo a través de una pantalla, y algunos elementos terminan ocultos detrás del encabezado fijo. Es decir, algo que está justo al final de la primera "página" y termina en la parte superior de la segunda "página" se oculta detrás del encabezado y nunca se ve.
¿Existe un truco CSS (o JS) similar para cambiar la cantidad de contenido que se desplaza con cada pulsación de pgup/pgdn, o no tengo suerte?
Esto es lo que he ido con:
document.addEventListener('keydown', function(e) { if(e.key === 'PageUp' || e.key === 'PageDown') { e.preventDefault(); const doc = document.documentElement; const left = doc.scrollLeft; const top = doc.scrollTop; // standard offset in Chrome is 30px, and the site header is 104px const delta = window.innerHeight - 134; (e.key === 'PageUp') ? window.scrollTo(left, top - delta) : window.scrollTo(left, top + delta); } });