IOS设备上网页中的页面滚动效果模拟

56 阅读 0 评论 37 点赞

我是靠谱客的博主满意鸵鸟，最近开发中收集的这篇文章主要介绍IOS设备上网页中的页面滚动效果模拟，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

可能咋一看不知道我说的是个啥，因为ios本来就用这功能的啊，还模拟它干啥？先听我说下项目背景哈

我现在开发的是一个webapp，主要是用在ipad上，这个app的大小是固定大小的，为了防止触摸它出现弹性滚动，我加个句代码：

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

这样这个页面就被我锁死了，不会出现讨厌的弹性滚动了，再加上一些meta属性（我的blog里有这些）全屏啥的，基本上跟nativeapp无异了。

但是呢，问题出来了，里面有个div里面内容比较多，需要用到滚动条，现在的问题是，我的网页里设置这个div的overflow为scroll后，触摸这个div不能滚动了！我先试着把上面的代码注释点，发现可以滚动了，但是效果很差，没有ios自带的那种手离开后还会滚动一会的那种“刹车”的效果，于是呢，就想着自己搞一个出来，于是就写了一个jquery插件，实现了上下左右滑动和轻拍（因为点击事件在ipad上有半秒延迟），下面会有下载地址。关于滚动效果呢，是我花了一整天时间研究出来的，觉得收获很大，所以拿出来跟大家分享下，以下是一些核心代码：

(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);

函数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
}

上面第一段代码的意思是在手指离开屏幕之后要执行的一个连续动画，可以看到，随着时间速度越来越慢，速度的变化由函数ha决定，一开始我用y = 1/x的速度，发现速度变化太快，动画执行完一半就基本上等于结束了，后来就是在慢慢的蹭一秒多，县的很不流畅。。然后就换，换成了第二个，y = -x + 100，这个效果好一点了，但是太流畅了。。刷一下飞好远。。用aa调整灵敏度后效果还是差强人意，于是看了半天苹果自带的效果，发现速度在由快变慢的过程中，加速度绝对值的变化程度好像是小--大--小的一个状态，于是我就试着用y = x2 - 10x（具体多少忘记了）之类的函数去试，效果还好，不过还是有点快，最后我选中了四分之一圆，这个弧度性感又均衡，在灵敏度调整为20后，终于实现了和ios相差无几的滚动效果，心里那个高兴啊。。呵呵，。

由于代码不长，就直接贴这里了，简单的API如下：

$(selecor).swipeleft(fn).swiperight(fn).swipeup(fn).swipedown(fn).tap(fn).scrollX().scrollY().scroll('xy');注意滚动和swipe会冲突，尽量避免一起使用~

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);