Difficult to quickly scroll pages for keyboard-only users

Issue

Typically a user loads a web page and can immediately start scrolling without the need to navigate into the page. Here, keyboard-only users have to move keyboard focus into the content area in order to scroll the page.

This is not a WCAG violation, but it is a hassle for keyboard-only users to peruse the page.

To reproduce

Visit https://2024.stateofcss.com/en-US in a desktop browser.
Prior to any other interaction, use the down arrow key (↓) to scroll the page.
Alternatively, press Space to scroll one screenful.
Using Chrome, press Tab↹ until "Skip to Content" is in focus.
Press Enter↵
Press ↓ or Space to scroll the page.

Additional notes:

Firefox will scroll once "Skip to Content" has been followed.
Chrome will not.
On subsequent loads, Chrome will 'remember' (my word) that it once had focus and allow scrolling.
This may be because the skip-link links to href="#page-main" but the scrolling container is id="pageContent" (id="page-main" is a child).
I did not test in Safari.

Suggestion

The following should / could resolve the issue.

Adjust the skip-link destination.
Remove .oPsli { overflow: unset; }.
Add position: sticky and top: 0 to the <div class="SurveyBanner__Banner_-sc-md19pk-0 kPzTea">.
Also add z-index: 1; to the <div class="SurveyBanner__Banner_-sc-md19pk-0 kPzTea"> some of the content boxes don't sit above it.
Add position: sticky, top: 2.8em, and height: calc(100vh - 2.7em); (you may want to adjust the sizes) to <div id="sidebar">.
Remove overflow styles from .REBFc.
Set the skip link to fixed position and give it a background color.

Or I guess I could have just pasted this into the issue (which includes overrides for the things I could not remove):

.oPsli {
  overflow: unset;
}
#sidebar {
  position: sticky;
  top: 2.8em;
  height: calc(100vh - 2.7em);
}
.SurveyBanner__Banner_-sc-md19pk-0 {
  position: sticky;
  top: 0;
  z-index: 1;
}
.REBFc {
  overflow-y: initial;
  overflow: initial;
}
.cLQUPa:focus {
  z-index: 2;
  position: fixed !important;
  background: #000;
}

That CSS is from a custom style block I added to Stylus for the site in Firefox. It may not be perfect.

Devographics / Monorepo