Nested scroll containers

[daun]

Description

• Continuation of Replace scrl with a native scroll implementation #88
• Scroll elements into view recursively (target + all scrollable parents)
• Use compute-scroll-into-view package to ensure compliance with spec and browsers
• Update naming around scroll targets vs. scroll containers

Playground example

Checks

• The PR is submitted to the main branch
• The code was linted before pushing (npm run lint)
• All tests are passing (npm run test)
• New or updated tests are included
• The documentation was updated as required

[daun]

@hirasso Regarding naming:

TLDR

Let's go with scrollElement for the html/root element, scrollContainer for scrollable/overflowing elements, and scrollTarget for anchors being scrolled to.

Long rant

I tried a few different namings/spellings in this PR. Hadn't bothered to check back with you because it's still in draft. Would have written up a few notes to start a discussion. But let's discuss now :)

I found the element in scrollingElement confusing once it no longer relates to the documentElement, i.e. the absolute root element containing stuff. There is a distinction between the one mandatory element that scrolls the document (technically called the scrollingElement) and any number of possible elements with overflowing content (commonly called scroll container, if my intuition holds and if the MDN glossary is to be believed).

My confusion specifically stems from thinking that element could refer to any element participating in the scrolling, so it might (to somebody who didn't write the code) be either the containing element or the target element. Calling it a container gets rid of that ambiguity. You're right that in the swup context it opens another ambiguity, but I think tacking scroll in front of container very elegantly solves this.

Other alternatives:

• Scrollable containers
• Overflow containers
• Scrollable areas

WDYT?

[hirasso]

Sounds very reasonable. The scroll prefix definitely helps. Sorry for bringing this up so early, before you even asked for my review 😅

[github-actions]

Playwright test results

 3 passed

Details

 3 tests across 1 suite
 
 bb62b87

[daun]

Got nested containers working nicely now. Ready for review :)

[daun]

Computing all the offsets got so frustrating and I never got the same results as the native browser implementation. Then I stumbled upon compute-scroll-into-view which is spec-compliant and does all the heavy lifting. It e.g. supports scroll-margin set on each element 😍

The package also enables easy horizontal scrolling, but I decided to add that in a separate PR in case we need to tweak any public APIs (very probable).

[daun]

Updated the naming around element, container and target. And added a screen recording in the PR description.

[hirasso]

Looks great! And damn - I discovered that package as well recently, but forgot to mention it here. Glad you found it yourself! I'm AFK at the moment, but will test this as soon as I get the chance.

[hirasso]

Actually - this looks great and I don't want to cancel momentum. Approved! Since we are doing more work before merging this all into main, chances are we'll catch any issues before that when tackling the remaining features.

This is fun 🤩

[daun]

Nice. And yeah, life on the next branch is exciting :)