maxmarinich / vanilla-swipe

Hi,

I have a list of carousels in mobile view.
When page scroll starts at the carousel it got prevented, there is any way to allow it?

Hi, @felixmosh! Not sure if I understood your question correctly, but you can't switch preventDefaultTouchmoveEvent property on the fly. If you set it in true during initialization, the only way to change it is to call the update method. Also need to consider, that Event can be prevented if it has cancelable property in true. Condition link.

Hope i answered your question. If not, please let me know.

Thanx for the quick answer,

I'm using alice-react-carousel that uses this lib, as I've described, when I enable this flag, I can't scroll my page vertically if the scroll starts at one of the carousels.

Probably, you not set mobile mod. Please check.

I've tested it on my mobile phone :]
It is reproduces also in mobile mode in chrome.

I've updated your example to reproduce it
https://74kpx.csb.app/

Probably, the issue is for other library. And i guess you set a property not correctly for the carousel(preventEventOnTouchMove === true). To avoid preventing it should be false. Please check.

Hi @maxmarinich! Brilliant library - react-alice-carousel is very nice, however I am having the same issue as @felixmosh. 😢

If I set preventEventOnTouchMove === true, then I cannot scroll the page if the scroll is initiated on a carousel. If I set preventEventOnTouchMove === false, then the page and carousel both scroll at the same time.

We need the best of both worlds. IMO, preventing the event on touchMove should only happen when the swipe direction is horizontal, and should not prevent if a vertical scroll is initiated on a carousel.

vanilla-swipe/src/index.ts

Lines 127 to 129 in 3fb34a7

    
           const { delta, onSwiping, preventDefaultTouchmoveEvent } = this.props; 
        
           if (e.cancelable && preventDefaultTouchmoveEvent) e.preventDefault();

Let me know if I can help with a fix.

😃

	const { delta, onSwiping, preventDefaultTouchmoveEvent } = this.props;

	if (e.cancelable && preventDefaultTouchmoveEvent) e.preventDefault();

preventEventOnTouchMove prevent vertical scroll of the page