[csswg-drafts] [css-overflow-5] Scrolling to unreachable scroll aligned marker positions (#11165)

flackr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-overflow-5] Scrolling to unreachable scroll aligned marker positions ==
There are many common circumstances in which the scroll targets of scroll markers are in unreachable positions. For example, this occurs with any list with `scroll-align: center` where the targeted items are significantly smaller than the scrollport.

Demo page: https://flackr.github.io/carousel/examples/prototypes/active-marker/#unreachable
![Screenshot 2024-11-07 at 10 22 15 AM](https://github.com/user-attachments/assets/8693155e-5cdd-4117-8528-f6a72057211b)

Items 1 through 3 cannot get to their scroll aligned positions. Similarly the last 3 items at the least can never reach their scroll aligned position. In #10738 I have proposed a mechanism by which explicitly scrolling to an item would result in it being active even if it is not possible to scroll to. This ensures that at least clicking on the markers would result in them being active and moving to them via keyboard would work. However, as soon as you scroll, it would jump to the aligned item.

Without adding special behavior to avoid this, we would need to decide between one of 2 behaviors, as shown in https://flackr.github.io/carousel/examples/prototypes/active-marker/#unreachable. Either,
* We always use the normal selection behavior, starting with item 4 active, or
* We consider being at the beginning of the scroller as having the first target active and scrolling to the end as having the last item active. This results in a significant jump in the active marker once you begin scrolling.

We could however think on ideas for how we might expect to be able to select the items outside of the reachable range. I've listed a few potential options with demos below:

Options:
1. Add additional virtual scrolling ([demo](https://flackr.github.io/carousel/examples/prototypes/active-marker/#virtual-scroll)). Naively, we could extend the scrollable range to allow virtually scrolling between the items whose aligned positions is not reachable. This seems confusing, but it is an option that has come up a few times I've talked about this.
2. Distribute scroll proportionally ([demo](https://flackr.github.io/carousel/examples/prototypes/active-marker/#proportional)). This would mean that we'd map the scrollable range to the proportion of the scroll aligned layout ranges including the unreachable positions. As a result, you'd be able to reach all items, however, the active item would often be different than the visually aligned item.
3. Distribute scroll leading up to first reachable item ([demo](https://flackr.github.io/carousel/examples/prototypes/active-marker/#distribute-ends)). In this case, we find the first item that is at a positive scroll offset (and similarly the last reachable item before the end of scroll) and map the scroll before you reach the first item and after you pass the last between the remaining unreachable items. This preserves the active item matching the aligned item once you reach the first aligned item. It does degenerate a bit to the current situation if your first aligned item is very close to the start of scroll as shown in the second example. 
4. Distribute some amount of the initial and ending scroll ([demo](https://flackr.github.io/carousel/examples/prototypes/active-marker/#distribute-page)). In this case, we ensure that the amount of scroll distance we distribute is non-trivial. In the prototype, we distribute the scroll up to the first item that is more than half a scrollport away from being active. This is similar to option 3 except avoids the edge case where you can immediately jump to the aligned item. Similar to option 2 though, this means that until you reach that amount of scroll the active item does not match the visually aligned item.

I think my preference would be if we decide to do this, to adopt something similar to option 3, or perhaps ensure some minimal margin as in option 4.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11165 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 7 November 2024 16:16:26 UTC