[css-overflow-3] [css-ui-4] Draggable scrollers

[bramus]

(Not sure which spec this should go into, ergo not tagging it)

Whenever I see demos like https://codepen.io/supah/pen/xxJMbbg I’m wondering what it would take to make a scroller draggable on desktop (i.e. click + hold on the scroller and then move the pointer to change the scroll offset)

Yes, it can be done with a tad of JS but that’s blocking and would require authors to try and recreate the native fling curves to get it right, often leading to an uncanny valley type of situation as that’s OS dependent.

Ideally, to me, it would be a single CSS property that says “this scroller can be dragged to scroll”. When activated, clicking + dragging on the padding-box of the scroller will change the scroll offset in response.

While this has some implications such as not being able to select text in those scrollers (I guess), I don’t think this is a problem for things like https://scroll-driven-animations.style/demos/cover-flow/css/. Authors should be educated to only use this feature in certain situations.

[Loirooriol]

No tag just makes it easier to forget about issues. Scrolling containers are CSS Overflow, and interaction with the pointer seems CSS UI, so going with that.

[bramus]

Thanks, Oriol. I’ve updated the title to reflect this as well.

[yisibl]

Yes, this interaction effect is very popular: https://twitter.com/didiercatz/status/1744065302088843508

I have a hack implementation: https://twitter.com/yisibl/status/1744691885606945102

drag-tabs.mp4

[argyleink]

What if the way this was implemented was with a "full scrollport covering, invisible, track and thumb". No code would have to change in the engine, because to it, the user is just dragging the thumb inside the track. To the user, they feel like theyre panning. As if scrollbar-width accepted 100cqb or 100cqi.

[yisibl]

What if the way this was implemented was with a "full scrollport covering, invisible, track and thumb". No code would have to change in the engine, because to it, the user is just dragging the thumb inside the track. To the user, they feel like theyre panning. As if scrollbar-width accepted 100cqb or 100cqi.

This may result in the specified tab not being clicked.

[yisibl]

@argyleink I achieved a similar effect using scroll-snap + scroll-timeline, and I'm not sure it can be improved any further.

https://codepen.io/yisi/pen/abMwRGL