Terminology:
Master scrollbar: The overall page scrollbar, similar to what you see to the right of this forum page.
Child scrollbar: The scrollbar rendered in the scrollbar.
Tested in Preview Beta.
Correct me if I’m wrong, Mevi, but doesn’t Disable Scroll remove the ability for the page in question to ever generate a master vertical scrollbar? Presumably, any overflowing content below is simply cut off, yes?
So I should be able to set my custom header container and a scroll view underneath it (both relative), set an exact height for the header, set both dimensions of the scroll view to 100%, and the page would be forced to render to fit both components in the available browser screen space for Chrome, in this case.
The issue that remains is the double scrollbar syndrome in which both the master and child scrollbars are simultaneously rendered such as (just tested now):
As other users have discussed, full-page scrolling issues come with this. To be fair, you could set exact dimensions to the scroll view and somewhat fake it within the dimensions of your browser. But as soon as you adjusted the browser window size or add another toolbar, for example, to Chrome, the same problem persists.
BUT… that may be old news as I’ve improvised a stable solution just this morning.
-
Set the header to Absolute.
-
Set a higher z-index, if necessary, for the header container.
-
Set both dimensions of the scroll view to 100%.
• The scroll view will now render underneath the header, including its content.
-
Set upper padding for the scroll view to force its UI components visually below the header. In our case, 60 padding worked. Experiment.
Result: The page renders correctly for the most part. Curiously, the child scrollbar for the scroll view renders properly “below” the header, as it should, rather than “below” as in the top portion of scrollbar showing up hidden under the header.
You get something like the following image with a single scrollbar and a floating header:
It even respects browser window size changes, although it can flicker between double scrollbars rendering and a single scrollbar with extreme vertical compression. But little things like a slightly smaller PC screen or having another toolbar visible in your browser won’t throw it out of whack.