Disable vertical window scrolling when scrolling horizontally

[rscotten]

On mobile browsers, scrolling horizontally through items in the carousel also allows the window to scroll vertically, making for a not great user experience.

Is there a way to disable vertical window scrolling when scrolling through the carousel horizontally?

[mrbinky3000]

You would have to write some code as manipulating the host window this is outside the scope of Pure React Carousel.

What you could do is set the body overflow css to "hidden" while users are engaged with the carousel and then remove the css rule once the user disengages with the carousel.

https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily

You would change the css whenever someone presses a button or starts dragging, and then restore the css back to normal once the slide animation has finished. You might have to provide your own slide animation, even if it is simply a clone of the default animation. Pure React Carousel and plain vanilla javascript both have enough hooks built in for you to accomplish the task.

More info on css animation end callback: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onanimationend

[rscotten]

@mrbinky3000 Thanks for the response.

That was my initial thought, but I'm not quite sure how to hook into the event listeners (i.e. onTouch, etc.) on the Carousel component. I looked at the available functions on the API and nothing looked like it would work. I didn't see a way to grab a ref either.

[mrbinky3000]

Hmm. I think I need to refactor the Slider component to allow custom event handlers to become callbacks of our event handlers.

In the meantime, give your Slider component an ID and add the event handler the old fashioned way with vanilla javascript?

Inside the componentDidMount of the parent component of your the carousel...

// pseudo code
const el = document.getElementById('something');
el.addEventListener( /*stuff */ );

I will look into making the Slider pass through events in the meantime.

[rscotten]

@mrbinky3000 That would be very helpful. Thank you!

[mrbinky3000]

@rscotten A pull request is on the way.

[mrbinky3000]

v1.20.0 now lets let pass whatever props you want, including your own React event handler props like onClick, onMouseDown, etc to the "tray" element in the Slider component. If an event handler added by you is the same as one used by the carousel, it is executed as a callback from our event handler. The event is persisted and then passed to your handler.