Prevent touchmove event for x axis only and scroll page for y axis in Safari Mobile and Android

I want to build a classic gallery where with a finger you can move the photo left or right to see the next or previous photo. I use jQuery binding event touchstart, touchmove, touchhend to calculate the location of photos using the event.pageX property. The problem is that when you move your finger, the page for scrolling starts. The touchmove listener is immediately listening. To fix the problem, I put event.preventDefault () in the touchmove listener, and the listener was called by the slider, and the page was stopped for scrolling. I want the finger to be able to move the photo and at the same time I can scroll the page. I see that this happens regularly on the Apple website (see this page http://www.apple.com/osx/ ) and even this script does the same http://iosscripts.com/iosslider-jquery- horizontal-slider-for-iphone-ipad-safari /

I want to know the concept behind the scenes. I can’t understand what I have to do to fix this. I even try to use preventDefault and set $ (window) .scrollTop manually calculated on page Y, but the effects were very ugly.

+4
source share

All Articles