3

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?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Codemonkey
  • 4,455
  • 5
  • 44
  • 76
  • 1
    Attach event handlers to keydown and check for the PgUp and PgDown keys. Prevent default and scroll however much you want. – Heretic Monkey Sep 20 '21 at 16:03
  • 1
    Does this answer your question? [Jump to specific points in a HTML page using Page up and down](https://stackoverflow.com/questions/46298937/jump-to-specific-points-in-a-html-page-using-page-up-and-down) – Heretic Monkey Sep 20 '21 at 16:06
  • Kind of. It does give a way of doing it, but I already knew I could do that. I wanted to know if there's an "official" standard way to achieve this. But given the lack of responses, I assume not. – Codemonkey Sep 21 '21 at 14:45

1 Answers1

2

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);
    }
});
Codemonkey
  • 4,455
  • 5
  • 44
  • 76