tannerhodges/snap-slider

Draggable on desktop

Opened this issue · 5 comments

merijnponzo commented

Hello Tanner,
Any idea how I would make the slider also draggable for desktop devices.

I tried to implement something like this
https://htmldom.dev/drag-to-scroll

But I guess scroll-snap and the normal scroll-behaviour are clashing.
I tested out
https://github.com/barthy-koeln/scroll-snap-slider/blob/main/src/ScrollSnapDraggable.js
But this doesn't work great on wide screens

tannerhodges commented

😬 Ahh, yes that's a great question…

Quick Answers

The problems:

The fix:

If the native snap is still too jarring, I'd recommend considering Flickity as a replacement for sliders that need richer interactions like dragging on desktop.

🐭 Draggable Example

The browser's native snap can be jarring when you release your mouse halfway between slides, but here's a quick prototype showing how you might implement the draggable behavior from https://htmldom.dev/drag-to-scroll with Snap Slider:

https://codepen.io/tannerhodges/pen/eYVwjEa

2022-06-22.Snap.Slider.Draggable.Example.mp4

📝 Longer Answer

For better or worse, it seems like browsers have standardized on an "eager snap" behavior. I haven't dug in to fully understand how or why this is yet, but in the meantime I've worked around it by temporarily disabling CSS Scroll Snap.

Ideally, I'd expect scroll-behavior: smooth; to cause CSS Scroll Snap to smooth snap into place—but apparently that's not the case.

I haven't looked around much yet, but if it hasn't already been brought up, I think this would be a great suggestion for the Scroll Snap spec: that either the browser should automatically smooth snap elements into position by default, or that developers should have a way to opt-in to that kind of behavior (e.g., via scroll-behavior).

As for Snap Slider, I currently don't have desktop dragging as a feature in my v3 roadmap. Maybe something to consider for v4? Or as a kind of extension?

🙏 Happy to look into other code examples, or brainstorm if you have other questions/suggestions for how to handle desktop dragging with Snap Slider. Hopefully this helps some in the meantime.

tannerhodges commented

Hey @merijnponzo, checking in here.

❓ Did this help solve your problem?

merijnponzo commented

Hi Tanner, thanks for the codepen, it's looking good already.

I tested with full with images instead of half images and indeed you have a problem scrolling half way.

.example > li {
	display: block;
	flex: 0 0 auto;
	width: var(--width, 100%);

So i tested local by adding some smooth behaviour when the mouse is released.
So '1000' should be replaced with the start coordinates of each slide.

const mouseUpHandler = function () {
    // Scroll the element
    ele.scrollTo({
        left: 1000,
        top: 0,
        behavior: 'smooth',
    })

giphy

So maybe with the help of using the
https://www.npmjs.com/package/scroll-snap-api
it's possible to slide to each coordnate of a slide

thanks

dngraphisme commented

Hello @tannerhodges thanks for your library. I also work with barty's library (scrollsnapslider) but I also wanted to use yours.

On macOS I find that the drag and drop is not great via the codepen code. So if I understand correctly by reading the post above you do not intend to implement it in the current version?

Thanks Nicolas

merijnponzo commented

Hi!

I played around with snap-slider for desktop dragging.

Like @tannerhodges said scroll-snapping and (css) smooth behaviour with javascript dragging doesn't play well together.
What i've done:

  1. Indeed, i added a class when dragging with scroll-snap-type: none;
  2. i added scroll-snap-api to get the getScrollSnapPositions
  3. Whenever the desktop dragging has finished i look for the closest snapping point
  4. to slide smooth back to the closest snapping point i use animated-to-scroll so i can create a promise to add the scroll-snapping class back to the container

Github
https://github.com/merijnponzo/scrollsnap-draggable

So the only thing is that it looks like the current slide is one behind, but i'm sure that can be fixed.
But overall it feels like the native scroll-snapping

Apr-27-2023 01-32-47

I have to add some listeners for resizing the window, because i think that getScrollSnapPositions would have different snapping points then.

So maybe this can be the start of kinda plugin, both scroll-snap-api and

best