jQuery移动滚动动力

时间:2016-01-25 18:01:26

标签: jquery jquery-plugins

我正在编写一个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));

这是一个插件的工作示例。

https://jsfiddle.net/nicolagrosu/eaeq1gys/4/

0 个答案:

没有答案