[cssom-view] extend scrollIntoViewOptions' *ScrollLogicalPosition* with `"farthest"` and `"none"`

Open
#8,098 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
css
Domain
frontend

Research direction

Start with the linked CSSOM View specification section defining ScrollLogicalPosition and review the existing scrollIntoViewOptions block and inline values. Compare the proposed "farthest" and "none" behavior with the slider scenarios described in the issue; done requires agreed specification semantics for both new values.

Written by the indexing model from the issue text.

Description

cssom-view-1

Relevant spec: https://w3c.github.io/csswg-drafts/cssom-view/#enumdef-scrolllogicalposition

While Element.scrollIntoView() got a lot more practical with the current ScrollLogicalPosition block and inline values, there is still some scenarios that would benefit from additional options that are "farthest" and "none".

In both cases, the scenario is that we've created a scroll slider whose items are at such a narrow size, that you would see e.g. three of them at once with the fourth being cut off at the border.

The slider has arrow key support as well as programmatic scroll buttons on both sides. We use IntersectionObserver to keep track of the visibility of each item in the slider, so that we can determine which item to scroll into view when the user strikes an arrow key or clicks one of the two directional scroll buttons:

  • arrow key / button click towards end: last item from the start with < 1.0 intersection
  • arrow key / first item with < 1.0 intersection after a series of items with 1.0 intersection

CodePen example: https://codepen.io/Schepp/pen/KKeyaJx

Now to how "farthest" and "none" ScrollLogicalPosition can help us here:

  • "farthest": when a user triggers a scroll further towards one direction, what we want is to grab the first not / not fully visible item in that direction and to scroll it not just slightly into view, but all the way up to the opposite end of the visible area, thereby unveiling a lot more items behind it. The only way to realize this at the moment is to swap between inline: "start" and inline: "end" depending on the direction chosen by the user. While this is not that hard to do, the code could be simplified with an inline: "farthest" - also given that there is the option "nearest".

  • "none": depending on the screen size and the scroll position the slider might be cut off somewhere in block direction. Now when a user triggers a programmatic scroll, either by striking an arrow key or clicking a scroll button, what happens is that not only does the inner part of the slider scroll in the inline direction, the whole slider itself will also scroll into view in block direction, if cut off. This is a bit irritating. It gets downward bad UX the moment it is wired to autoforward using that same programmatic code as every time it scrolls, it will pull the viewport to show it again. I currently stop that to happen by observing the slider itself via IntersectionObserver and pausing autoforward once it gets cut off. An ideal solution for this would be to extend ScrollLogicalPosition with a "none" option, so that we can set block: "none" and be good.

Dominant language
Bikeshed
Stars
4.9k
Forks
816
Avg merge
2d 18h
Merged PRs (30d)
24

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from w3c/csswg-drafts

All issues in w3c/csswg-drafts

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.