I recently learnt about :target::before{content:'';display:block;height:--fixedHeaderHeight} which enables fragments to scroll into position without being hidden by a tall fixed header. I.e. if the header is 200px high, the element with the ID specified in the URL will appear just below that, rather than hidden behind it.
I have a similar problem in my admin system of pgup/pgdn though. I regularly page up and down through a screen, and some items end up being hidden behind the fixed header. I.e. something that's just off the bottom of the first "page" and ends up at the top of the second "page" gets hidden behind the header, and is never seen.
Is there a similar CSS (or JS) trick to change the amount of content that gets scrolled with each press of pgup/pgdn, or am I out of luck?
Here's what I've gone with:
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);
}
});