Resolves an issue where the iscroll horizontal scrolling area cannot pull the page

Using Iscroll in recent projects has encountered a problem when setting wrapper for horizontal scrolling, if you place your finger in that area, you will not be able to pull the page, which means that the zone cancels the default event. This experience is really unacceptable, especially when there are multiple horizontal scrolling areas in the page, it is easy to touch this area when users will feel that the page is very card.

Google search, it seems that a lot of people worry about this problem. There is an expert to give a solution, which can be found here.

The code is as follows:

New Iscroll (' Scrollpanel ', {    //Other options go    ... false,    this.absdistx > (//user is scrolling the x axis, so prevent the browsers ' native scrolling E.preventdefault () ; } }});

Override the Onbeforescrollstart event to determine the sliding distance of the touch, and cancel the default event only when the horizontal slide distance is greater than the vertical sliding distance (that is, when the left and right slide), so that the page does not affect scrolling. See Iscroll source code, onbeforescrollstart:function (e) {E.preventdefault ();}, which defaults to canceling the default event directly.

It's a good feeling when you get here. But don't be happy too early.

Swipe up and down the horizontal scrolling area, the page can actually scroll, but after a few more pages, there is a problem.

Swipe the area left and right, scroll down, and then press and hold the area to scroll the page, and you'll find it still can't scroll, and then you can click the area again. This behavior is unacceptable when you need to touch 2 times to scroll the page.

After many tests, I locked the problem to the absdistx/y. Finally, after the left and right slide, the value of absdistx/y is not reset, the second time to slide the area when the Onbeforescrollstart event is executed, the absdistx/y value is the last value, so the program still prevents the page from scrolling.

Here's how to fix it:

Myscroll =New Iscroll (' Scrollpanel ', {Other options go ... hscroll:True, Onbeforescrollstart:function(e) {if (This.absdistx > (This.absdisty +5)) {User is scrolling the x axis, so prevent the browsers ' native scrolling e.preventdefault (); } },Resolve the first problem that cannot be slid ontouchend:function  () { var self = this; if (self.touchendtimeid) {  Cleartimeout (self.touchendtimeid); }  self.touchendtimeid = setTimeout (function  () {   SELF.ABSDISTX = 0;  self.absdistx = 0;}, 600); }}); 

Do the processing inside the ontouchend, reset the value of absdistx/y after each swipe. Why use settimeout? In fact, in order to prevent false judgment, too sensitive and bad, sometimes you just want to swipe left and right, although the angle of sliding slightly upward or downward.

Resolves an issue where the iscroll horizontal scrolling area cannot pull the page