solution that causes pages to be difficult to slide up and down using the ionic frame for horizontal scrolling

Hybrid app development uses the Ionic framework's <ion-scroll> directives to facilitate horizontal scrolling and vertical sliding. For example, we want to achieve a horizontal sliding gallery, you can use the following code.

 

 

 

It is not a problem to look at this horizontal gallery alone, and the functions and operations are normal. But our project encountered a problem: a large page, there are multiple gallery controls, our page is difficult to slide up and down, sliding very hard, this is why. For example: If your page is all input inputs control, then this page is very difficult to slide, because when we slide on the phone screen, inadvertently it is easy to click on these input boxes, when the input box to get focus, the page can not slide. With the same problem with <ion-scroll>, when the page is full of gallery controls, sliding is also very laborious.



There is no good solution from the Ionic document, the Final solution is: Do not use the <ion-scroll> directive, to achieve left and right sliding. Use the Touchmove and Touchstart events in HTML5 to implement scrolling:

Do for left-right scroll var startx = 0;
var starty = 0;

var $gallery = $ (". Picturesholder"); $gallery. On ("Touchstart", function (e) {startx = E.originalevent.changedtouches[0].pagex, Starty = E.originalevent.cha
Ngedtouches[0].pagey;

});
	$gallery. On ("Touchmove", function (e) {var X = E.originalevent.changedtouches[0].pagex-startx;
	 
	var Y = E.originalevent.changedtouches[0].pagey-starty;
		if (Math.Abs (X) > Math.Abs (Y) && X > 0) {var Cur_scroll = $ (this). ScrollLeft ();
		$ (this). ScrollLeft (parseint (cur_scroll)-X);
		E.preventdefault ();
	E.stoppropagation ();
		else if (Math.Abs (X) > Math.Abs (Y) && X < 0) {var Cur_scroll = $ (this). ScrollLeft ();
		$ (this). ScrollLeft (parseint (cur_scroll)-X);
		E.preventdefault ();
	E.stoppropagation (); else if (Math.Abs (y) > Math.Abs (x) && y > 0) {} else if (Math.Abs (y) > Math.Abs (x) && Y & Lt
0) {} else{}}); Do for left-right Scroll
 

 Web browsers do not have the above 2 events, we can use MouseDown and MouseMove simulation, the following code can be left and right to slide.