Proposal: define scroll amount via CSS

Hello,

When scrolling on web pages using the space or page down keys, the browser
takes the viewport height and scrolls down by that amount. This is normally
fine (and expected behaviour) except when fixed headers are used. Because
the entire page size is used and not just that which is visible to the
user, the page scrolls down too far and a few lines of text end up
positioned behind the header.

The issue is further described in this Bugzilla thread from 6 years ago:
https://bugzilla.mozilla.org/show_bug.cgi?id=780345

Firefox's solution was to detect when a fixed header was being used and
adjust for it, but this doesn't detect all fixed headers (possibly because
there are multiple ways to implement fixed headers) and while other
browsers may have implemented this or something similar, Chrome has not.

It is also possible to account for this with JavaScript, but this is far
from an ideal solution. It seems to me like something that should be able
to be manipulated with CSS. As well, as an accessibility concern, it should
be something that can be fixed across all browsers.

My proposed solution would be to add a new property, scroll-amount, which
would be set to a size in units.

This addresses a separate concern from CSS Scroll Snap because when
scrolling with CSS Scroll Snap, you are brought to a predefined point on
the page. The point of this change would be to allow a developer to define
how far each button-press would scroll down the page, from any point to any
point.

Typical usage (with an 80px header) might look something like this:

body {
    scroll-amount: 100vh - 80px;
}

I haven't made a github issue because I'm not sure what to tag it as.

Thanks,
Hazel