Simplebar: Scroll-Snap Support

[markus-kraemer]

Is CSS scroll-snap supported with simplebar?

[Grsmto]

Just tested and yes it works just fine https://codesandbox.io/s/broken-cloud-lg3dc

[markus-kraemer]

Great. Horizontal too?

Am 22.01.2020 um 18:32 schrieb Adrien Denat [e-mail]:


Just tested and yes it works just fine https://codesandbox.io/s/broken-cloud-lg3dc

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or unsubscribe.

[strarsis]

Awesome! Would it even be compatible with a scroll-snap polyfill?

[strarsis]

@Grsmto, @markus-kraemer: Well, apparently dragging the scroll handle results in the behaviour of scroll-snap-stop: always, it isn't possible to drag items halfways into view. But it is possible to scroll smoothly using e.g. the mousewheel or keys (including scroll snapping).

[Grsmto]

That's right it seems like a limitation. I don't see an easy fix for this except very hacky solution, probably not worth the hassle to implement it in the library.
Would be good to add this as a known limitation in the documentation.

[strarsis]

@Grsmto: So the issue is that the browsers don't fire the scroll events when scroll snapping is in progress?

[Grsmto]

@strarsis no, the issue si that SimpleBar does el.scrollTop = x to position the div scroll when dragging the scrollbar but for some reason css scroll snapping "blocks" the element from being in-between 2 snap points.
It seems like the native scrollbar doesn't just do scrollTop under the hood but does some more complex stuff to allow that it snaps only on mouse release and not while dragging around.
Unfortunately I tried to disable/enable the css snap property on drag start/stop but it doesn't work: when I stop dragging, the div doesn't go back to the snap point.

[strarsis]

@Grsmto: Yes, even scrollTo with animation parameter doesn't work,
the scroll position changes instantaneously with scroll-snapping.
Maybe some dummy element inside scroll container that is shrinked/expanded,
but this library wants to be as native and lightweight as possible.