Add option to use both scroll axes

[dash-james]

Hi there,

Appreciate the work you've put into this plugin, thank you!

I was wondering if there was a way to be able to include an option to use both axes to scroll?

Thank you!
James

[dash-james]

I wrote something similar to the Drag Handler that works quite well for the wheel events. It has support for both axes as well. Maybe there is a way we can integrate the same technique?

// Wheel Events
const handleWheel = useCallback((e) => {
	if (!embla) return
	e.preventDefault()
	// Calculate the scroll direction based on the wheel event
	const delta = e.deltaY || e.deltaX || e.wheelDelta
	const direction = delta > 0 ? -1 : 1
	// Use Embla's ScrollBody to control speed and mass
	const engine = embla.internalEngine()
	const scrollBody = engine.scrollBody
	// Calculate the rawForce (similar to DragHandler's logic)
	const rawForce = Math.abs(delta)
	// Adjust the dragFree value as needed (true for smooth scrolling, false for snapping)
	const dragFree = true // Adjust as needed
	// Use scrollTo.distance to initiate the scroll based on the calculated force
	scrollBody.useSpeed(16) // Set your desired base speed
	scrollBody.useMass(1) // Set your desired base mass
	engine.scrollTo.distance(direction * rawForce, !dragFree)
}, [embla])

useEffect(() => {
	if (!embla || !wheel) return
	if (ref.current) ref.current.addEventListener('wheel', handleWheel)
	return () => ref.current?.removeEventListener('wheel', handleWheel)
}, [embla, ref])

[davidjerleke]

Thanks @dash-james,

Will try it out when I get the chance!

Best,
David

[ADTC]

@dash-james may I suggest changing the first three backticks ``` to include language ```js so that it will do syntax highlighting?

@xiel I was hoping that forceWheelAxis will have a both option rather than only x and y. Reason is:

• A carousel is typically only in one direction, for example horizontal.
• A mouse wheel typically only moves in vertical direction. (Some mouse drivers combine Shift key to change it to horizontal, but not all mouse does this.)
• On a trackpad, a user can use gestures (typically two-finger swipes left/right) to do horizontal scrolling.
• With the both option, the carousel could always move to another slide, regardless of vertical scrolling of mouse wheel or horizontal scrolling of trackpad.
• Ideally, vertical scrolling on trackpad should be ignored, but if it's not practical to reliably detect the pointing device type, then just allow it to also change slide.

Would it be possible to add a both option?

[chanmathew]

+1 for a 'both' option as well, especially for better support between mouse wheels and trackpads as @ADTC mentioned!

[kristinzinser]

+1 to both for x and y (for trackpad and scrollwheel) 🙏

[zb-sj]

I've tried adding the plugin twice out of curiosity 😜 :
[WheelGesturesPlugin({ forceWheelAxis: 'y' }), WheelGesturesPlugin()]

It kinda works, but stutters in some grey areas.

---

I went ahead and created PR #225

[fkoehler42]

Hello ! I'm also interested in an option to handle both wheel axes, is the integration of @zb-sj PR being considered ?