我正在编写一个jQuery滚动插件,用于一个phonegap android项目,它在phonegap上工作正常,但我想添加本机像滚动动量,而不使用任何额外的插件。
有人可以帮助我为这个插件添加动力。
(function ($) {
$.fn.touchScroll = function() {
var scrollContainer = this;
var scrollContent = this.children();
var yTravelled = 0, prevY, touch, position, scroll = 0, scrollDown = true, scrollUp = true;
var mY = scrollContainer.height()/2;
scrollContainer.on({
touchmove : function(e) {
position = scrollContent.position().top;
touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
if (touch.pageY < mY) {
if(scrollDown){
prevY && (yTravelled -= Math.abs(touch.pageY - prevY));
prevY = touch.pageY;
mY = touch.pageY;
}
} else {
if(scrollUp){
prevY && (yTravelled += Math.abs(touch.pageY - prevY));
prevY = touch.pageY;
mY = touch.pageY;
}
}
scrollContent.css({"transform":"translate3d(0,"+(scroll+yTravelled)+"px,0)"});
var scrollContentHeight = scrollContent.height();
var windowHeight = scrollContainer.height();
var scrollEnd = (scroll+yTravelled) - scrollContainer.height();
if(Math.abs(scrollEnd) > scrollContentHeight){
!scrollDown;
scrollContent.css({"transform":"translate3d(0,-"+(scrollContentHeight - windowHeight)+"px,0)"});
}else scrollDown;
if(scroll+yTravelled > 0){
!scrollUp;
scrollContent.css({"transform":"translate3d(0,0,0)"});
}else{
scrollUp;
}
},
touchend : function() {
scroll = position;
prevY = 0;
yTravelled = 0;
}
});
};
}(jQuery));
这是一个插件的工作示例。