Simulation of Page scrolling effect on webpages on iOS devices

Maybe I don't know what I'm talking about, because IOS originally used this function, and what else does it simulate? Let me explain the background of the project.

I am developing a webapp, which is mainly used on the iPad. The app size is fixed. To prevent the app from being elastically rolled by the touch, I add the following code:

$(document).bind('touchmove', function(e) {    e.preventDefault();});

In this way, the page will be locked by me, and there will be no annoying elastic scrolling, plus some meta attributes (which are included in my blog) in full screen, basically, it is no different from nativeapp.

However, when the problem arises, there is a div with a lot of content and a scroll bar is required. The problem now is that after the overflow of this div is set to scroll on my webpage, you cannot scroll when you touch this Div! I first tried to comment out the above Code and found that the code can be rolled, but the effect is very poor. I don't have the kind of "brake" effect that the iOS comes with after the hand leaves, as a result, I thought about creating a plug-in by myself, so I wrote a jquery plug-in to implement the sliding and PAT (because the click event is delayed for half a second on the iPad. I spent a whole day researching the rolling effect and thought it was a great deal. So I would like to share with you the following core code:

(function show(time){if(!source.animation){return;}source.animation = window.setTimeout(function(){if(time > 90){ return; }X && $self.scrollLeft($self.scrollLeft() - ha(time,speedX) * aa );Y && $self.scrollTop($self.scrollTop() - ha(time,speedY) * aa );show(++time);},aa);})(1);

Function ha:

function ha(x,maxSpeed){//return maxSpeed / x;//y = 100 / x;//return maxSpeed - maxSpeed / 100 * x;// y = -x + 100;return (1 - Math.sqrt(10000-(x-100)*(x-100)) / 100) * maxSpeed ;//y = -sqrt(10000-(x-100)2) + 100}

The first piece of code above indicates a continuous animation to be executed after the finger leaves the screen. We can see that as the speed slows down, the speed changes are determined by the function ha, at the beginning, I used the y = 1/X speed and found that the speed changed too fast. After half of the animation was executed, it basically ended. Later, I was slowly rubbing for more than one second, the county is not smooth .. Then I changed it to the second one, y =-x + 100. The effect is better, but it is too smooth .. Click it to fly far away .. After adjusting the sensitivity with AA, the effect was still unsatisfactory, so I watched the effect that Apple brought in for half a day and found that the speed was slowing down quickly, the change degree of the absolute value of acceleration seems to be small-big-small, so I tried to use y
= X2-10x (the specific amount of forgotten) and other functions to try, the effect is good, but still a little fast, and finally I selected 1/4 circles, this radian is sexy and balanced, after the sensitivity was adjusted to 20, we finally achieved a rolling effect similar to IOS .. Haha ,.

Because the code is not long, you can directly paste it here. The Simple API is as follows:

$ (Selecor ). swipeleft (FN ). swiperight (FN ). swipeup (FN ). swipedown (FN ). tap (FN ). scrollx (). scrolly (). scroll ('xy'); note that scrolling conflicts with swipe, and try to avoid using it together ~

Jqueqy. tomtouch. js

(function($){//if (!document.documentElement.ontouchstart){return;}var events = "touchmove,tap,swiperight,swipeleft,swipeup,swipedown";var proto = function($e,type,fn){this.$e = $e;this.type = type;this.fn = fn;};proto.prototype = {swipeDistance:40,startX:0,startY:0,tempX:0,tempY:0,startTime:undefined,animation:undefined,touchmove:function(e){var self = e.data;e = e.originalEvent;if (e.targetTouches.length >= 1) {var touch = e.targetTouches[0];if(self._touchmove){self.fn.touchmove.call(this,{deltaX:touch.pageX - self.tempX,deltaY:touch.pageY - self.tempY,x:touch.pageX,y:touch.pageY,tomSource:self});}self.tempX = touch.pageX;self.tempY = touch.pageY;}},touchstart:function(e){var self = e.data;e = e.originalEvent;if (e.targetTouches.length >= 1) {var touch = e.targetTouches[0];self.tempX = self.startX = touch.pageX;self.tempY = self.startY = touch.pageY;self.animation = undefined;self.startTime = +new Date;self.fn.touchstart && self.fn.touchstart.call(this,{x:e.pageX,y:e.pageY,tomSource:self});}},touchend:function(e){var self = e.data;e = e.originalEvent;if (e.changedTouches.length >= 1) {self.animation = true;var touch = e.changedTouches[0]   ,now = +new Date()   ,dX = touch.pageX - self.startX   ,dY = touch.pageY - self.startY   ,AdX = Math.abs(dX)   ,AdY = Math.abs(dY)   ,timeD = now - self.startTime;   if((timeD < 100 && AdX < 15 && AdY < 15 && self._tap) || (dX > self.swipeDistance && AdX > AdY && self._swiperight) ||(-dX > self.swipeDistance && AdX > AdY && self._swipeleft) ||(dY > self.swipeDistance && AdY > AdX && self._swipedown)  ||(-dY > self.swipeDistance && AdY > AdX && self._swipeup)){self.fn.call(this,{});}var speedX = dX / timeD;var speedY = dY / timeD;//d(self.startY + "," + touch.pageY);self.fn.touchend &&self.fn.touchend.call(this,{x:touch.pageX,y:touch.pageY,speedX:speedX,speedY:speedY,tomSource:self});}},handle:function(){var self = this;$.each(events.split(','),function(i,item){if(item == self.type){self[ "_" + item ] = true;}});self.$e.bind("touchmove",self,self.touchmove);self.$e.bind("touchstart",self,self.touchstart);self.$e.bind("touchend",self,self.touchend);}};$.each(events.split(","),function(i,name){$.fn[name] = function(fn){var touches = new proto($(this),name,fn);touches.handle();return $(this);}});$.fn.touchScroll = function(direction){var X = /x/gi.test(direction)   ,Y = /y/gi.test(direction)   ,self = this   ;$(this).touchmove({touchmove:function(ex){X && $(this).scrollLeft($(this).scrollLeft() - ex.deltaX);Y && $(this).scrollTop($(this).scrollTop() - ex.deltaY);},touchend:function(e){var $self = $(this)   ,timeDuration = 3000   ,aa = 20   ,speedX = e.speedX   ,speedY = e.speedY   ,source = e.tomSource   ;//d(speedY);///*(function show(time){if(!source.animation){return;}source.animation = window.setTimeout(function(){if(time > 90){ return; }X && $self.scrollLeft($self.scrollLeft() - ha(time,speedX) * aa );Y && $self.scrollTop($self.scrollTop() - ha(time,speedY) * aa );show(++time);},aa);})(1);function ha(x,maxSpeed){//return maxSpeed / x;//y = 100 / x;//return maxSpeed - maxSpeed / 100 * x;// y = -x + 100;return (1 - Math.sqrt(10000-(x-100)*(x-100)) / 100) * maxSpeed ;//y = -sqrt(10000-(x-100)2) + 100}}});return $(this);}$.fn.touchScrollX = function(){$(this).touchScroll("x");};$.fn.touchScrollY = function(){$(this).touchScroll("y");};})(jQuery);