Description
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
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.
As mentioned in the linked issue #10738, a developer, authors can avoid these unreachable target situations by:
- adding padding to the edges of their scrolling element, or
- ensuring their scroll marker elements are scrollport sized, or
- enabling infinite / cyclical scrolling as in [css-overflow] Infinite scrolling #5411
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:
- Add additional virtual scrolling (demo). Naively, we could extend the scrollable range to allow virtually scrolling between the items whose aligned positions is not reachable. This seems unintuitive and confusing.
- We could add additional real scrolling into the extra content as in [css-overflow][css-scroll-snap] Introduce mechanism to extend scrollable overflow area to make snap points reachable #7885. This seems like it could be confusing to do automatically as the scroll range would not match the content range, but it is an option that has come up and adding padding matches the way this is typically solved in practice.
- Distribute scroll proportionally (demo). 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.
- Distribute scroll leading up to first reachable item (demo). 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.
- Distribute some amount of the initial and ending scroll (demo). 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 5 but with a greatly reduced range over which we traverse the unreachable markers.