jquery结合iscroll.js做下拉刷新页面，上拉加载页面

先上代码，里面都有注释这就不一一说明了

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>上拉加载</title>
  6.     <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  7.  
  8.     <script src="js/jquery-1.11.3.min.js"></script>
  9.     <style type="text/css">
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             list-style: none;
  14.             box-sizing: border-box;
  15.             -webkit-box-sizing: border-box;
  16.             -moz-box-sizing: border-box;
  17.         }
  18.         html {font-size: 14px; }
  19.         header {
  20.             height: 40px;
  21.             width: 100%;
  22.             min-width: 320px;
  23.             background: #000;
  24.             text-align: center;
  25.             color: #fff;
  26.             font-size: 1.2rem;
  27.             line-height: 40px;
  28.         }
  29.         footer {
  30.             height: 52px;
  31.             width: 100%;
  32.             min-width: 320px;
  33.             background: #000;
  34.             text-align: center;
  35.             color: #fff;
  36.             font-size: 1.2rem;
  37.             line-height: 52px;
  38.             position: absolute;
  39.             bottom: 0;
  40.         }
  41.         #wrapper {
  42.             width: 100%;
  43.             min-width: 320px;
  44.             position: absolute;
  45.             left: 0;
  46.             top: 40px;
  47.             bottom: 52px;
  48.             overflow: hidden;
  49.             z-index: 1;
  50.             background-color: #eee;
  51.  
  52.             /* 防止本机Windows上的触摸事件 */
  53.             -ms-touch-action: none;
  54.  
  55.             /* 防止callout tap-hold和文本的选择 */
  56.             -webkit-touch-callout: none;
  57.             -webkit-user-select: none;
  58.             -moz-user-select: none;
  59.             -ms-user-select: none;
  60.             user-select: none;
  61.  
  62.             /* 防止文本调整取向变化对web应用程序很有用 */
  63.             -webkit-text-size-adjust: none;
  64.             -moz-text-size-adjust: none;
  65.             -ms-text-size-adjust: none;
  66.             -o-text-size-adjust: none;
  67.             text-size-adjust: none;
  68.         }
  69.         .pull-loading {
  70.             text-align: center;
  71.             height: 40px;
  72.             line-height: 40px;
  73.             display: flex;
  74.             align-items: center;
  75.             justify-content: center;
  76.         }
  77.         #scroller ul li {
  78.             padding: 20px 10px;
  79.             border-bottom: solid 1px #ccc;
  80.             background: #fff;
  81.         }
  82.     </style>
  83.  
  84. </head>
  85. <body>
  86. <header>上拉加载，下拉刷新</header>
  87. <div id="wrapper">
  88.     <div id="scroller">
  89.         <ul>
  90.  
  91.         </ul>
  92.         <div class="pull-loading">
  93.             上拉加载
  94.         </div>
  95.     </div>
  96. </div>
  97. <footer>底部</footer>
  98.  
  99. <script type="text/javascript" src="js/iscroll.js"></script>
  100. <script type="text/javascript">
  101.     var myscroll = new iScroll("wrapper", {
  102.         onScrollMove: function () { //拉动时
  103.             //上拉加载
  104.             if (this.y < this.maxScrollY) {
  105.                 $(".pull-loading").html("释放加载");
  106.                 $(".pull-loading").addClass("loading");
  107.             } else {
  108.                 $(".pull-loading").html("上拉加载");
  109.                 $(".pull-loading").removeClass("loading");
  110.             }
  111.         },
  112.         onScrollEnd: function () { //拉动结束时
  113.             //上拉加载
  114.             if ($(".pull-loading").hasClass('loading')) {
  115.                 $(".pull-loading").html("加载中...");
  116.                 pullOnLoad();
  117.             }
  118.         }
  119.     });
  120.     //上拉加载函数,ajax
  121.     var num = 0;
  122.     var page = 3; //每次加载3条
  123.  
  124.     //初始化先加载三条数据
  125.     pullOnLoad();
  126.  
  127.     function pullOnLoad() {
  128.         setTimeout(function () {
  129.             $.ajax({
  130.                 url: "http://spider.dcloud.net.cn/api/news",
  131.                 type: "get",
  132.                 dataType: 'json',
  133.                 success: function (data) {
  134.                     var data_length = data.length;//数据的总长度
  135.                     var remainder = data_length % page;//余数
  136.                     if ( data_length >= (num+page)){
  137.                         for (var j = num; j < num + page; j++){
  138.                             var text = data[j].title;
  139.                             $("#scroller ul").append("<li>"+ text +"</li>");
  140.                         }
  141.                         num+=page;
  142.                     }else if (remainder != 0 && data_length-num == remainder){
  143.                         for (var j = num; j < num + remainder; j++){
  144.                             var text = data[j].title;
  145.                             $("#scroller ul").append("<li>"+ text +"</li>");
  146.                         }
  147.                         num+=page;
  148.                     }else{
  149.                         $('.pull-loading').html("没有了哟");
  150.                     }
  151.                     myscroll.refresh();
  152.                 },
  153.                 error: function () {
  154.                     console.log("出错了");
  155.                 }
  156.             });
  157.             myscroll.refresh();
  158.         }, 500);
  159.     }
  160. </script>
  161.  
  162. </body>
  163. </html>

iscroll.js的代码

  1. /**
  2.  * Created by Administrator on 2018/11/14.
  3.  */
  4. /*!
  5.  * iScroll v4.2.5 ~ Copyright (c) 2012 Matteo Spinelli, http://cubiq.org
  6.  * Released under MIT license, http://cubiq.org/license
  7.  */
  8. (function(window, doc){
  9.     var m = Math,
  10.         dummyStyle = doc.createElement('div').style,
  11.         vendor = (function () {
  12.             var vendors = 't,webkitT,MozT,msT,OT'.split(','),
  13.                 t,
  14.                 i = 0,
  15.                 l = vendors.length;
  16.  
  17.             for ( ; i < l; i++ ) {
  18.                 t = vendors[i] + 'ransform';
  19.                 if ( t in dummyStyle ) {
  20.                     return vendors[i].substr(0, vendors[i].length - 1);
  21.                 }
  22.             }
  23.  
  24.             return false;
  25.         })(),
  26.         cssVendor = vendor ? '-' + vendor.toLowerCase() + '-' : '',
  27.  
  28.     // Style properties
  29.         transform = prefixStyle('transform'),
  30.         transitionProperty = prefixStyle('transitionProperty'),
  31.         transitionDuration = prefixStyle('transitionDuration'),
  32.         transformOrigin = prefixStyle('transformOrigin'),
  33.         transitionTimingFunction = prefixStyle('transitionTimingFunction'),
  34.         transitionDelay = prefixStyle('transitionDelay'),
  35.  
  36.     // Browser capabilities
  37.         isAndroid = (/android/gi).test(navigator.appVersion),
  38.         isIDevice = (/iphone|ipad/gi).test(navigator.appVersion),
  39.         isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
  40.  
  41.         has3d = prefixStyle('perspective') in dummyStyle,
  42.         hasTouch = 'ontouchstart' in window && !isTouchPad,
  43.         hasTransform = vendor !== false,
  44.         hasTransitionEnd = prefixStyle('transition') in dummyStyle,
  45.  
  46.         RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',
  47.         START_EV = hasTouch ? 'touchstart' : 'mousedown',
  48.         MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
  49.         END_EV = hasTouch ? 'touchend' : 'mouseup',
  50.         CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup',
  51.         TRNEND_EV = (function () {
  52.             if ( vendor === false ) return false;
  53.  
  54.             var transitionEnd = {
  55.                 ''            : 'transitionend',
  56.                 'webkit'    : 'webkitTransitionEnd',
  57.                 'Moz'        : 'transitionend',
  58.                 'O'            : 'otransitionend',
  59.                 'ms'        : 'MSTransitionEnd'
  60.             };
  61.  
  62.             return transitionEnd[vendor];
  63.         })(),
  64.  
  65.         nextFrame = (function() {
  66.             return window.requestAnimationFrame ||
  67.                 window.webkitRequestAnimationFrame ||
  68.                 window.mozRequestAnimationFrame ||
  69.                 window.oRequestAnimationFrame ||
  70.                 window.msRequestAnimationFrame ||
  71.                 function(callback) { return setTimeout(callback, 1); };
  72.         })(),
  73.         cancelFrame = (function () {
  74.             return window.cancelRequestAnimationFrame ||
  75.                 window.webkitCancelAnimationFrame ||
  76.                 window.webkitCancelRequestAnimationFrame ||
  77.                 window.mozCancelRequestAnimationFrame ||
  78.                 window.oCancelRequestAnimationFrame ||
  79.                 window.msCancelRequestAnimationFrame ||
  80.                 clearTimeout;
  81.         })(),
  82.  
  83.     // Helpers
  84.         translateZ = has3d ? ' translateZ(0)' : '',
  85.  
  86.     // Constructor
  87.         iScroll = function (el, options) {
  88.             var that = this,
  89.                 i;
  90.  
  91.             that.wrapper = typeof el == 'object' ? el : doc.getElementById(el);
  92.             that.wrapper.style.overflow = 'hidden';
  93.             that.scroller = that.wrapper.children[0];
  94.  
  95.             // Default options
  96.             that.options = {
  97.                 hScroll: true,
  98.                 vScroll: true,
  99.                 x: 0,
  100.                 y: 0,
  101.                 bounce: true,
  102.                 bounceLock: false,
  103.                 momentum: true,
  104.                 lockDirection: true,
  105.                 useTransform: true,
  106.                 useTransition: false,
  107.                 topOffset: 0,
  108.                 checkDOMChanges: false,        // Experimental
  109.                 handleClick: true,
  110.  
  111.                 // Scrollbar
  112.                 hScrollbar: true,
  113.                 vScrollbar: true,
  114.                 fixedScrollbar: isAndroid,
  115.                 hideScrollbar: isIDevice,
  116.                 fadeScrollbar: isIDevice && has3d,
  117.                 scrollbarClass: '',
  118.  
  119.                 // Zoom
  120.                 zoom: false,
  121.                 zoomMin: 1,
  122.                 zoomMax: 4,
  123.                 doubleTapZoom: 2,
  124.                 wheelAction: 'scroll',
  125.  
  126.                 // Snap
  127.                 snap: false,
  128.                 snapThreshold: 1,
  129.  
  130.                 // Events
  131.                 onRefresh: null,
  132.                 onBeforeScrollStart: function (e) { e.preventDefault(); },
  133.                 onScrollStart: null,
  134.                 onBeforeScrollMove: null,
  135.                 onScrollMove: null,
  136.                 onBeforeScrollEnd: null,
  137.                 onScrollEnd: null,
  138.                 onTouchEnd: null,
  139.                 onDestroy: null,
  140.                 onZoomStart: null,
  141.                 onZoom: null,
  142.                 onZoomEnd: null
  143.             };
  144.  
  145.             // User defined options
  146.             for (i in options) that.options[i] = options[i];
  147.  
  148.             // Set starting position
  149.             that.x = that.options.x;
  150.             that.y = that.options.y;
  151.  
  152.             // Normalize options
  153.             that.options.useTransform = hasTransform && that.options.useTransform;
  154.             that.options.hScrollbar = that.options.hScroll && that.options.hScrollbar;
  155.             that.options.vScrollbar = that.options.vScroll && that.options.vScrollbar;
  156.             that.options.zoom = that.options.useTransform && that.options.zoom;
  157.             that.options.useTransition = hasTransitionEnd && that.options.useTransition;
  158.  
  159.             // Helpers FIX ANDROID BUG!
  160.             // translate3d and scale doesn't work together!
  161.             // Ignoring 3d ONLY WHEN YOU SET that.options.zoom
  162.             if ( that.options.zoom && isAndroid ){
  163.                 translateZ = '';
  164.             }
  165.  
  166.             // Set some default styles
  167.             that.scroller.style[transitionProperty] = that.options.useTransform ? cssVendor + 'transform' : 'top left';
  168.             that.scroller.style[transitionDuration] = '0';
  169.             that.scroller.style[transformOrigin] = '0 0';
  170.             if (that.options.useTransition) that.scroller.style[transitionTimingFunction] = 'cubic-bezier(0.33,0.66,0.66,1)';
  171.  
  172.             if (that.options.useTransform) that.scroller.style[transform] = 'translate(' + that.x + 'px,' + that.y + 'px)' + translateZ;
  173.             else that.scroller.style.cssText += ';position:absolute;top:' + that.y + 'px;left:' + that.x + 'px';
  174.  
  175.             if (that.options.useTransition) that.options.fixedScrollbar = true;
  176.  
  177.             that.refresh();
  178.  
  179.             that._bind(RESIZE_EV, window);
  180.             that._bind(START_EV);
  181.             if (!hasTouch) {
  182.                 if (that.options.wheelAction != 'none') {
  183.                     that._bind('DOMMouseScroll');
  184.                     that._bind('mousewheel');
  185.                 }
  186.             }
  187.  
  188.             if (that.options.checkDOMChanges) that.checkDOMTime = setInterval(function () {
  189.                 that._checkDOMChanges();
  190.             }, 500);
  191.         };
  192.  
  193. // Prototype
  194.     iScroll.prototype = {
  195.         enabled: true,
  196.         x: 0,
  197.         y: 0,
  198.         steps: [],
  199.         scale: 1,
  200.         currPageX: 0, currPageY: 0,
  201.         pagesX: [], pagesY: [],
  202.         aniTime: null,
  203.         wheelZoomCount: 0,
  204.  
  205.         handleEvent: function (e) {
  206.             var that = this;
  207.             switch(e.type) {
  208.                 case START_EV:
  209.                     if (!hasTouch && e.button !== 0) return;
  210.                     that._start(e);
  211.                     break;
  212.                 case MOVE_EV: that._move(e); break;
  213.                 case END_EV:
  214.                 case CANCEL_EV: that._end(e); break;
  215.                 case RESIZE_EV: that._resize(); break;
  216.                 case 'DOMMouseScroll': case 'mousewheel': that._wheel(e); break;
  217.                 case TRNEND_EV: that._transitionEnd(e); break;
  218.             }
  219.         },
  220.  
  221.         _checkDOMChanges: function () {
  222.             if (this.moved || this.zoomed || this.animating ||
  223.                 (this.scrollerW == this.scroller.offsetWidth * this.scale && this.scrollerH == this.scroller.offsetHeight * this.scale)) return;
  224.  
  225.             this.refresh();
  226.         },
  227.  
  228.         _scrollbar: function (dir) {
  229.             var that = this,
  230.                 bar;
  231.  
  232.             if (!that[dir + 'Scrollbar']) {
  233.                 if (that[dir + 'ScrollbarWrapper']) {
  234.                     if (hasTransform) that[dir + 'ScrollbarIndicator'].style[transform] = '';
  235.                     that[dir + 'ScrollbarWrapper'].parentNode.removeChild(that[dir + 'ScrollbarWrapper']);
  236.                     that[dir + 'ScrollbarWrapper'] = null;
  237.                     that[dir + 'ScrollbarIndicator'] = null;
  238.                 }
  239.  
  240.                 return;
  241.             }
  242.  
  243.             if (!that[dir + 'ScrollbarWrapper']) {
  244.                 // Create the scrollbar wrapper
  245.                 bar = doc.createElement('div');
  246.  
  247.                 if (that.options.scrollbarClass) bar.className = that.options.scrollbarClass + dir.toUpperCase();
  248.                 else bar.style.cssText = 'position:absolute;z-index:100;' + (dir == 'h' ? 'height:7px;bottom:1px;left:2px;right:' + (that.vScrollbar ? '7' : '2') + 'px' : 'width:7px;bottom:' + (that.hScrollbar ? '7' : '2') + 'px;top:2px;right:1px');
  249.  
  250.                 bar.style.cssText += ';pointer-events:none;' + cssVendor + 'transition-property:opacity;' + cssVendor + 'transition-duration:' + (that.options.fadeScrollbar ? '350ms' : '0') + ';overflow:hidden;opacity:' + (that.options.hideScrollbar ? '0' : '1');
  251.  
  252.                 that.wrapper.appendChild(bar);
  253.                 that[dir + 'ScrollbarWrapper'] = bar;
  254.  
  255.                 // Create the scrollbar indicator
  256.                 bar = doc.createElement('div');
  257.                 if (!that.options.scrollbarClass) {
  258.                     bar.style.cssText = 'position:absolute;z-index:100;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.9);' + cssVendor + 'background-clip:padding-box;' + cssVendor + 'box-sizing:border-box;' + (dir == 'h' ? 'height:100%' : 'width:100%') + ';' + cssVendor + 'border-radius:3px;border-radius:3px';
  259.                 }
  260.                 bar.style.cssText += ';pointer-events:none;' + cssVendor + 'transition-property:' + cssVendor + 'transform;' + cssVendor + 'transition-timing-function:cubic-bezier(0.33,0.66,0.66,1);' + cssVendor + 'transition-duration:0;' + cssVendor + 'transform: translate(0,0)' + translateZ;
  261.                 if (that.options.useTransition) bar.style.cssText += ';' + cssVendor + 'transition-timing-function:cubic-bezier(0.33,0.66,0.66,1)';
  262.  
  263.                 that[dir + 'ScrollbarWrapper'].appendChild(bar);
  264.                 that[dir + 'ScrollbarIndicator'] = bar;
  265.             }
  266.  
  267.             if (dir == 'h') {
  268.                 that.hScrollbarSize = that.hScrollbarWrapper.clientWidth;
  269.                 that.hScrollbarIndicatorSize = m.max(m.round(that.hScrollbarSize * that.hScrollbarSize / that.scrollerW), 8);
  270.                 that.hScrollbarIndicator.style.width = that.hScrollbarIndicatorSize + 'px';
  271.                 that.hScrollbarMaxScroll = that.hScrollbarSize - that.hScrollbarIndicatorSize;
  272.                 that.hScrollbarProp = that.hScrollbarMaxScroll / that.maxScrollX;
  273.             } else {
  274.                 that.vScrollbarSize = that.vScrollbarWrapper.clientHeight;
  275.                 that.vScrollbarIndicatorSize = m.max(m.round(that.vScrollbarSize * that.vScrollbarSize / that.scrollerH), 8);
  276.                 that.vScrollbarIndicator.style.height = that.vScrollbarIndicatorSize + 'px';
  277.                 that.vScrollbarMaxScroll = that.vScrollbarSize - that.vScrollbarIndicatorSize;
  278.                 that.vScrollbarProp = that.vScrollbarMaxScroll / that.maxScrollY;
  279.             }
  280.  
  281.             // Reset position
  282.             that._scrollbarPos(dir, true);
  283.         },
  284.  
  285.         _resize: function () {
  286.             var that = this;
  287.             setTimeout(function () { that.refresh(); }, isAndroid ? 200 : 0);
  288.         },
  289.  
  290.         _pos: function (x, y) {
  291.             if (this.zoomed) return;
  292.  
  293.             x = this.hScroll ? x : 0;
  294.             y = this.vScroll ? y : 0;
  295.  
  296.             if (this.options.useTransform) {
  297.                 this.scroller.style[transform] = 'translate(' + x + 'px,' + y + 'px) scale(' + this.scale + ')' + translateZ;
  298.             } else {
  299.                 x = m.round(x);
  300.                 y = m.round(y);
  301.                 this.scroller.style.left = x + 'px';
  302.                 this.scroller.style.top = y + 'px';
  303.             }
  304.  
  305.             this.x = x;
  306.             this.y = y;
  307.  
  308.             this._scrollbarPos('h');
  309.             this._scrollbarPos('v');
  310.         },
  311.  
  312.         _scrollbarPos: function (dir, hidden) {
  313.             var that = this,
  314.                 pos = dir == 'h' ? that.x : that.y,
  315.                 size;
  316.  
  317.             if (!that[dir + 'Scrollbar']) return;
  318.  
  319.             pos = that[dir + 'ScrollbarProp'] * pos;
  320.  
  321.             if (pos < 0) {
  322.                 if (!that.options.fixedScrollbar) {
  323.                     size = that[dir + 'ScrollbarIndicatorSize'] + m.round(pos * 3);
  324.                     if (size < 8) size = 8;
  325.                     that[dir + 'ScrollbarIndicator'].style[dir == 'h' ? 'width' : 'height'] = size + 'px';
  326.                 }
  327.                 pos = 0;
  328.             } else if (pos > that[dir + 'ScrollbarMaxScroll']) {
  329.                 if (!that.options.fixedScrollbar) {
  330.                     size = that[dir + 'ScrollbarIndicatorSize'] - m.round((pos - that[dir + 'ScrollbarMaxScroll']) * 3);
  331.                     if (size < 8) size = 8;
  332.                     that[dir + 'ScrollbarIndicator'].style[dir == 'h' ? 'width' : 'height'] = size + 'px';
  333.                     pos = that[dir + 'ScrollbarMaxScroll'] + (that[dir + 'ScrollbarIndicatorSize'] - size);
  334.                 } else {
  335.                     pos = that[dir + 'ScrollbarMaxScroll'];
  336.                 }
  337.             }
  338.  
  339.             that[dir + 'ScrollbarWrapper'].style[transitionDelay] = '0';
  340.             that[dir + 'ScrollbarWrapper'].style.opacity = hidden && that.options.hideScrollbar ? '0' : '1';
  341.             that[dir + 'ScrollbarIndicator'].style[transform] = 'translate(' + (dir == 'h' ? pos + 'px,0)' : '0,' + pos + 'px)') + translateZ;
  342.         },
  343.  
  344.         _start: function (e) {
  345.             var that = this,
  346.                 point = hasTouch ? e.touches[0] : e,
  347.                 matrix, x, y,
  348.                 c1, c2;
  349.  
  350.             if (!that.enabled) return;
  351.  
  352.             if (that.options.onBeforeScrollStart) that.options.onBeforeScrollStart.call(that, e);
  353.  
  354.             if (that.options.useTransition || that.options.zoom) that._transitionTime(0);
  355.  
  356.             that.moved = false;
  357.             that.animating = false;
  358.             that.zoomed = false;
  359.             that.distX = 0;
  360.             that.distY = 0;
  361.             that.absDistX = 0;
  362.             that.absDistY = 0;
  363.             that.dirX = 0;
  364.             that.dirY = 0;
  365.  
  366.             // Gesture start
  367.             if (that.options.zoom && hasTouch && e.touches.length > 1) {
  368.                 c1 = m.abs(e.touches[0].pageX-e.touches[1].pageX);
  369.                 c2 = m.abs(e.touches[0].pageY-e.touches[1].pageY);
  370.                 that.touchesDistStart = m.sqrt(c1 * c1 + c2 * c2);
  371.  
  372.                 that.originX = m.abs(e.touches[0].pageX + e.touches[1].pageX - that.wrapperOffsetLeft * 2) / 2 - that.x;
  373.                 that.originY = m.abs(e.touches[0].pageY + e.touches[1].pageY - that.wrapperOffsetTop * 2) / 2 - that.y;
  374.  
  375.                 if (that.options.onZoomStart) that.options.onZoomStart.call(that, e);
  376.             }
  377.  
  378.             if (that.options.momentum) {
  379.                 if (that.options.useTransform) {
  380.                     // Very lame general purpose alternative to CSSMatrix
  381.                     matrix = getComputedStyle(that.scroller, null)[transform].replace(/[^0-9\-.,]/g, '').split(',');
  382.                     x = +(matrix[12] || matrix[4]);
  383.                     y = +(matrix[13] || matrix[5]);
  384.                 } else {
  385.                     x = +getComputedStyle(that.scroller, null).left.replace(/[^0-9-]/g, '');
  386.                     y = +getComputedStyle(that.scroller, null).top.replace(/[^0-9-]/g, '');
  387.                 }
  388.  
  389.                 if (x != that.x || y != that.y) {
  390.                     if (that.options.useTransition) that._unbind(TRNEND_EV);
  391.                     else cancelFrame(that.aniTime);
  392.                     that.steps = [];
  393.                     that._pos(x, y);
  394.                     if (that.options.onScrollEnd) that.options.onScrollEnd.call(that);
  395.                 }
  396.             }
  397.  
  398.             that.absStartX = that.x;    // Needed by snap threshold
  399.             that.absStartY = that.y;
  400.  
  401.             that.startX = that.x;
  402.             that.startY = that.y;
  403.             that.pointX = point.pageX;
  404.             that.pointY = point.pageY;
  405.  
  406.             that.startTime = e.timeStamp || Date.now();
  407.  
  408.             if (that.options.onScrollStart) that.options.onScrollStart.call(that, e);
  409.  
  410.             that._bind(MOVE_EV, window);
  411.             that._bind(END_EV, window);
  412.             that._bind(CANCEL_EV, window);
  413.         },
  414.  
  415.         _move: function (e) {
  416.             var that = this,
  417.                 point = hasTouch ? e.touches[0] : e,
  418.                 deltaX = point.pageX - that.pointX,
  419.                 deltaY = point.pageY - that.pointY,
  420.                 newX = that.x + deltaX,
  421.                 newY = that.y + deltaY,
  422.                 c1, c2, scale,
  423.                 timestamp = e.timeStamp || Date.now();
  424.  
  425.             if (that.options.onBeforeScrollMove) that.options.onBeforeScrollMove.call(that, e);
  426.  
  427.             // Zoom
  428.             if (that.options.zoom && hasTouch && e.touches.length > 1) {
  429.                 c1 = m.abs(e.touches[0].pageX - e.touches[1].pageX);
  430.                 c2 = m.abs(e.touches[0].pageY - e.touches[1].pageY);
  431.                 that.touchesDist = m.sqrt(c1*c1+c2*c2);
  432.  
  433.                 that.zoomed = true;
  434.  
  435.                 scale = 1 / that.touchesDistStart * that.touchesDist * this.scale;
  436.  
  437.                 if (scale < that.options.zoomMin) scale = 0.5 * that.options.zoomMin * Math.pow(2.0, scale / that.options.zoomMin);
  438.                 else if (scale > that.options.zoomMax) scale = 2.0 * that.options.zoomMax * Math.pow(0.5, that.options.zoomMax / scale);
  439.  
  440.                 that.lastScale = scale / this.scale;
  441.  
  442.                 newX = this.originX - this.originX * that.lastScale + this.x,
  443.                     newY = this.originY - this.originY * that.lastScale + this.y;
  444.  
  445.                 this.scroller.style[transform] = 'translate(' + newX + 'px,' + newY + 'px) scale(' + scale + ')' + translateZ;
  446.  
  447.                 if (that.options.onZoom) that.options.onZoom.call(that, e);
  448.                 return;
  449.             }
  450.  
  451.             that.pointX = point.pageX;
  452.             that.pointY = point.pageY;
  453.  
  454.             // Slow down if outside of the boundaries
  455.             if (newX > 0 || newX < that.maxScrollX) {
  456.                 newX = that.options.bounce ? that.x + (deltaX / 2) : newX >= 0 || that.maxScrollX >= 0 ? 0 : that.maxScrollX;
  457.             }
  458.             if (newY > that.minScrollY || newY < that.maxScrollY) {
  459.                 newY = that.options.bounce ? that.y + (deltaY / 2) : newY >= that.minScrollY || that.maxScrollY >= 0 ? that.minScrollY : that.maxScrollY;
  460.             }
  461.  
  462.             that.distX += deltaX;
  463.             that.distY += deltaY;
  464.             that.absDistX = m.abs(that.distX);
  465.             that.absDistY = m.abs(that.distY);
  466.  
  467.             if (that.absDistX < 6 && that.absDistY < 6) {
  468.                 return;
  469.             }
  470.  
  471.             // Lock direction
  472.             if (that.options.lockDirection) {
  473.                 if (that.absDistX > that.absDistY + 5) {
  474.                     newY = that.y;
  475.                     deltaY = 0;
  476.                 } else if (that.absDistY > that.absDistX + 5) {
  477.                     newX = that.x;
  478.                     deltaX = 0;
  479.                 }
  480.             }
  481.  
  482.             that.moved = true;
  483.             that._pos(newX, newY);
  484.             that.dirX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0;
  485.             that.dirY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;
  486.  
  487.             if (timestamp - that.startTime > 300) {
  488.                 that.startTime = timestamp;
  489.                 that.startX = that.x;
  490.                 that.startY = that.y;
  491.             }
  492.  
  493.             if (that.options.onScrollMove) that.options.onScrollMove.call(that, e);
  494.         },
  495.  
  496.         _end: function (e) {
  497.             if (hasTouch && e.touches.length !== 0) return;
  498.  
  499.             var that = this,
  500.                 point = hasTouch ? e.changedTouches[0] : e,
  501.                 target, ev,
  502.                 momentumX = { dist:0, time:0 },
  503.                 momentumY = { dist:0, time:0 },
  504.                 duration = (e.timeStamp || Date.now()) - that.startTime,
  505.                 newPosX = that.x,
  506.                 newPosY = that.y,
  507.                 distX, distY,
  508.                 newDuration,
  509.                 snap,
  510.                 scale;
  511.  
  512.             that._unbind(MOVE_EV, window);
  513.             that._unbind(END_EV, window);
  514.             that._unbind(CANCEL_EV, window);
  515.  
  516.             if (that.options.onBeforeScrollEnd) that.options.onBeforeScrollEnd.call(that, e);
  517.  
  518.             if (that.zoomed) {
  519.                 scale = that.scale * that.lastScale;
  520.                 scale = Math.max(that.options.zoomMin, scale);
  521.                 scale = Math.min(that.options.zoomMax, scale);
  522.                 that.lastScale = scale / that.scale;
  523.                 that.scale = scale;
  524.  
  525.                 that.x = that.originX - that.originX * that.lastScale + that.x;
  526.                 that.y = that.originY - that.originY * that.lastScale + that.y;
  527.  
  528.                 that.scroller.style[transitionDuration] = '200ms';
  529.                 that.scroller.style[transform] = 'translate(' + that.x + 'px,' + that.y + 'px) scale(' + that.scale + ')' + translateZ;
  530.  
  531.                 that.zoomed = false;
  532.                 that.refresh();
  533.  
  534.                 if (that.options.onZoomEnd) that.options.onZoomEnd.call(that, e);
  535.                 return;
  536.             }
  537.  
  538.             if (!that.moved) {
  539.                 if (hasTouch) {
  540.                     if (that.doubleTapTimer && that.options.zoom) {
  541.                         // Double tapped
  542.                         clearTimeout(that.doubleTapTimer);
  543.                         that.doubleTapTimer = null;
  544.                         if (that.options.onZoomStart) that.options.onZoomStart.call(that, e);
  545.                         that.zoom(that.pointX, that.pointY, that.scale == 1 ? that.options.doubleTapZoom : 1);
  546.                         if (that.options.onZoomEnd) {
  547.                             setTimeout(function() {
  548.                                 that.options.onZoomEnd.call(that, e);
  549.                             }, 200); // 200 is default zoom duration
  550.                         }
  551.                     } else if (this.options.handleClick) {
  552.                         that.doubleTapTimer = setTimeout(function () {
  553.                             that.doubleTapTimer = null;
  554.  
  555.                             // Find the last touched element
  556.                             target = point.target;
  557.                             while (target.nodeType != 1) target = target.parentNode;
  558.  
  559.                             if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {
  560.                                 ev = doc.createEvent('MouseEvents');
  561.                                 ev.initMouseEvent('click', true, true, e.view, 1,
  562.                                     point.screenX, point.screenY, point.clientX, point.clientY,
  563.                                     e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
  564.                                     0, null);
  565.                                 ev._fake = true;
  566.                                 target.dispatchEvent(ev);
  567.                             }
  568.                         }, that.options.zoom ? 250 : 0);
  569.                     }
  570.                 }
  571.  
  572.                 that._resetPos(400);
  573.  
  574.                 if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
  575.                 return;
  576.             }
  577.  
  578.             if (duration < 300 && that.options.momentum) {
  579.                 momentumX = newPosX ? that._momentum(newPosX - that.startX, duration, -that.x, that.scrollerW - that.wrapperW + that.x, that.options.bounce ? that.wrapperW : 0) : momentumX;
  580.                 momentumY = newPosY ? that._momentum(newPosY - that.startY, duration, -that.y, (that.maxScrollY < 0 ? that.scrollerH - that.wrapperH + that.y - that.minScrollY : 0), that.options.bounce ? that.wrapperH : 0) : momentumY;
  581.  
  582.                 newPosX = that.x + momentumX.dist;
  583.                 newPosY = that.y + momentumY.dist;
  584.  
  585.                 if ((that.x > 0 && newPosX > 0) || (that.x < that.maxScrollX && newPosX < that.maxScrollX)) momentumX = { dist:0, time:0 };
  586.                 if ((that.y > that.minScrollY && newPosY > that.minScrollY) || (that.y < that.maxScrollY && newPosY < that.maxScrollY)) momentumY = { dist:0, time:0 };
  587.             }
  588.  
  589.             if (momentumX.dist || momentumY.dist) {
  590.                 newDuration = m.max(m.max(momentumX.time, momentumY.time), 10);
  591.  
  592.                 // Do we need to snap?
  593.                 if (that.options.snap) {
  594.                     distX = newPosX - that.absStartX;
  595.                     distY = newPosY - that.absStartY;
  596.                     if (m.abs(distX) < that.options.snapThreshold && m.abs(distY) < that.options.snapThreshold) { that.scrollTo(that.absStartX, that.absStartY, 200); }
  597.                     else {
  598.                         snap = that._snap(newPosX, newPosY);
  599.                         newPosX = snap.x;
  600.                         newPosY = snap.y;
  601.                         newDuration = m.max(snap.time, newDuration);
  602.                     }
  603.                 }
  604.  
  605.                 that.scrollTo(m.round(newPosX), m.round(newPosY), newDuration);
  606.  
  607.                 if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
  608.                 return;
  609.             }
  610.  
  611.             // Do we need to snap?
  612.             if (that.options.snap) {
  613.                 distX = newPosX - that.absStartX;
  614.                 distY = newPosY - that.absStartY;
  615.                 if (m.abs(distX) < that.options.snapThreshold && m.abs(distY) < that.options.snapThreshold) that.scrollTo(that.absStartX, that.absStartY, 200);
  616.                 else {
  617.                     snap = that._snap(that.x, that.y);
  618.                     if (snap.x != that.x || snap.y != that.y) that.scrollTo(snap.x, snap.y, snap.time);
  619.                 }
  620.  
  621.                 if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
  622.                 return;
  623.             }
  624.  
  625.             that._resetPos(200);
  626.             if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
  627.         },
  628.  
  629.         _resetPos: function (time) {
  630.             var that = this,
  631.                 resetX = that.x >= 0 ? 0 : that.x < that.maxScrollX ? that.maxScrollX : that.x,
  632.                 resetY = that.y >= that.minScrollY || that.maxScrollY > 0 ? that.minScrollY : that.y < that.maxScrollY ? that.maxScrollY : that.y;
  633.  
  634.             if (resetX == that.x && resetY == that.y) {
  635.                 if (that.moved) {
  636.                     that.moved = false;
  637.                     if (that.options.onScrollEnd) that.options.onScrollEnd.call(that);        // Execute custom code on scroll end
  638.                 }
  639.  
  640.                 if (that.hScrollbar && that.options.hideScrollbar) {
  641.                     if (vendor == 'webkit') that.hScrollbarWrapper.style[transitionDelay] = '300ms';
  642.                     that.hScrollbarWrapper.style.opacity = '0';
  643.                 }
  644.                 if (that.vScrollbar && that.options.hideScrollbar) {
  645.                     if (vendor == 'webkit') that.vScrollbarWrapper.style[transitionDelay] = '300ms';
  646.                     that.vScrollbarWrapper.style.opacity = '0';
  647.                 }
  648.  
  649.                 return;
  650.             }
  651.  
  652.             that.scrollTo(resetX, resetY, time || 0);
  653.         },
  654.  
  655.         _wheel: function (e) {
  656.             var that = this,
  657.                 wheelDeltaX, wheelDeltaY,
  658.                 deltaX, deltaY,
  659.                 deltaScale;
  660.  
  661.             if ('wheelDeltaX' in e) {
  662.                 wheelDeltaX = e.wheelDeltaX / 12;
  663.                 wheelDeltaY = e.wheelDeltaY / 12;
  664.             } else if('wheelDelta' in e) {
  665.                 wheelDeltaX = wheelDeltaY = e.wheelDelta / 12;
  666.             } else if ('detail' in e) {
  667.                 wheelDeltaX = wheelDeltaY = -e.detail * 3;
  668.             } else {
  669.                 return;
  670.             }
  671.  
  672.             if (that.options.wheelAction == 'zoom') {
  673.                 deltaScale = that.scale * Math.pow(2, 1/3 * (wheelDeltaY ? wheelDeltaY / Math.abs(wheelDeltaY) : 0));
  674.                 if (deltaScale < that.options.zoomMin) deltaScale = that.options.zoomMin;
  675.                 if (deltaScale > that.options.zoomMax) deltaScale = that.options.zoomMax;
  676.  
  677.                 if (deltaScale != that.scale) {
  678.                     if (!that.wheelZoomCount && that.options.onZoomStart) that.options.onZoomStart.call(that, e);
  679.                     that.wheelZoomCount++;
  680.  
  681.                     that.zoom(e.pageX, e.pageY, deltaScale, 400);
  682.  
  683.                     setTimeout(function() {
  684.                         that.wheelZoomCount--;
  685.                         if (!that.wheelZoomCount && that.options.onZoomEnd) that.options.onZoomEnd.call(that, e);
  686.                     }, 400);
  687.                 }
  688.  
  689.                 return;
  690.             }
  691.  
  692.             deltaX = that.x + wheelDeltaX;
  693.             deltaY = that.y + wheelDeltaY;
  694.  
  695.             if (deltaX > 0) deltaX = 0;
  696.             else if (deltaX < that.maxScrollX) deltaX = that.maxScrollX;
  697.  
  698.             if (deltaY > that.minScrollY) deltaY = that.minScrollY;
  699.             else if (deltaY < that.maxScrollY) deltaY = that.maxScrollY;
  700.  
  701.             if (that.maxScrollY < 0) {
  702.                 that.scrollTo(deltaX, deltaY, 0);
  703.             }
  704.         },
  705.  
  706.         _transitionEnd: function (e) {
  707.             var that = this;
  708.  
  709.             if (e.target != that.scroller) return;
  710.  
  711.             that._unbind(TRNEND_EV);
  712.  
  713.             that._startAni();
  714.         },
  715.  
  716.         /**
  717.          *
  718.          * Utilities
  719.          *
  720.          */
  721.         _startAni: function () {
  722.             var that = this,
  723.                 startX = that.x, startY = that.y,
  724.                 startTime = Date.now(),
  725.                 step, easeOut,
  726.                 animate;
  727.  
  728.             if (that.animating) return;
  729.  
  730.             if (!that.steps.length) {
  731.                 that._resetPos(400);
  732.                 return;
  733.             }
  734.  
  735.             step = that.steps.shift();
  736.  
  737.             if (step.x == startX && step.y == startY) step.time = 0;
  738.  
  739.             that.animating = true;
  740.             that.moved = true;
  741.  
  742.             if (that.options.useTransition) {
  743.                 that._transitionTime(step.time);
  744.                 that._pos(step.x, step.y);
  745.                 that.animating = false;
  746.                 if (step.time) that._bind(TRNEND_EV);
  747.                 else that._resetPos(0);
  748.                 return;
  749.             }
  750.  
  751.             animate = function () {
  752.                 var now = Date.now(),
  753.                     newX, newY;
  754.  
  755.                 if (now >= startTime + step.time) {
  756.                     that._pos(step.x, step.y);
  757.                     that.animating = false;
  758.                     if (that.options.onAnimationEnd) that.options.onAnimationEnd.call(that);            // Execute custom code on animation end
  759.                     that._startAni();
  760.                     return;
  761.                 }
  762.  
  763.                 now = (now - startTime) / step.time - 1;
  764.                 easeOut = m.sqrt(1 - now * now);
  765.                 newX = (step.x - startX) * easeOut + startX;
  766.                 newY = (step.y - startY) * easeOut + startY;
  767.                 that._pos(newX, newY);
  768.                 if (that.animating) that.aniTime = nextFrame(animate);
  769.             };
  770.  
  771.             animate();
  772.         },
  773.  
  774.         _transitionTime: function (time) {
  775.             time += 'ms';
  776.             this.scroller.style[transitionDuration] = time;
  777.             if (this.hScrollbar) this.hScrollbarIndicator.style[transitionDuration] = time;
  778.             if (this.vScrollbar) this.vScrollbarIndicator.style[transitionDuration] = time;
  779.         },
  780.  
  781.         _momentum: function (dist, time, maxDistUpper, maxDistLower, size) {
  782.             var deceleration = 0.0006,
  783.                 speed = m.abs(dist) / time,
  784.                 newDist = (speed * speed) / (2 * deceleration),
  785.                 newTime = 0, outsideDist = 0;
  786.  
  787.             // Proportinally reduce speed if we are outside of the boundaries
  788.             if (dist > 0 && newDist > maxDistUpper) {
  789.                 outsideDist = size / (6 / (newDist / speed * deceleration));
  790.                 maxDistUpper = maxDistUpper + outsideDist;
  791.                 speed = speed * maxDistUpper / newDist;
  792.                 newDist = maxDistUpper;
  793.             } else if (dist < 0 && newDist > maxDistLower) {
  794.                 outsideDist = size / (6 / (newDist / speed * deceleration));
  795.                 maxDistLower = maxDistLower + outsideDist;
  796.                 speed = speed * maxDistLower / newDist;
  797.                 newDist = maxDistLower;
  798.             }
  799.  
  800.             newDist = newDist * (dist < 0 ? -1 : 1);
  801.             newTime = speed / deceleration;
  802.  
  803.             return { dist: newDist, time: m.round(newTime) };
  804.         },
  805.  
  806.         _offset: function (el) {
  807.             var left = -el.offsetLeft,
  808.                 top = -el.offsetTop;
  809.  
  810.             while (el = el.offsetParent) {
  811.                 left -= el.offsetLeft;
  812.                 top -= el.offsetTop;
  813.             }
  814.  
  815.             if (el != this.wrapper) {
  816.                 left *= this.scale;
  817.                 top *= this.scale;
  818.             }
  819.  
  820.             return { left: left, top: top };
  821.         },
  822.  
  823.         _snap: function (x, y) {
  824.             var that = this,
  825.                 i, l,
  826.                 page, time,
  827.                 sizeX, sizeY;
  828.  
  829.             // Check page X
  830.             page = that.pagesX.length - 1;
  831.             for (i=0, l=that.pagesX.length; i<l; i++) {
  832.                 if (x >= that.pagesX[i]) {
  833.                     page = i;
  834.                     break;
  835.                 }
  836.             }
  837.             if (page == that.currPageX && page > 0 && that.dirX < 0) page--;
  838.             x = that.pagesX[page];
  839.             sizeX = m.abs(x - that.pagesX[that.currPageX]);
  840.             sizeX = sizeX ? m.abs(that.x - x) / sizeX * 500 : 0;
  841.             that.currPageX = page;
  842.  
  843.             // Check page Y
  844.             page = that.pagesY.length-1;
  845.             for (i=0; i<page; i++) {
  846.                 if (y >= that.pagesY[i]) {
  847.                     page = i;
  848.                     break;
  849.                 }
  850.             }
  851.             if (page == that.currPageY && page > 0 && that.dirY < 0) page--;
  852.             y = that.pagesY[page];
  853.             sizeY = m.abs(y - that.pagesY[that.currPageY]);
  854.             sizeY = sizeY ? m.abs(that.y - y) / sizeY * 500 : 0;
  855.             that.currPageY = page;
  856.  
  857.             // Snap with constant speed (proportional duration)
  858.             time = m.round(m.max(sizeX, sizeY)) || 200;
  859.  
  860.             return { x: x, y: y, time: time };
  861.         },
  862.  
  863.         _bind: function (type, el, bubble) {
  864.             (el || this.scroller).addEventListener(type, this, !!bubble);
  865.         },
  866.  
  867.         _unbind: function (type, el, bubble) {
  868.             (el || this.scroller).removeEventListener(type, this, !!bubble);
  869.         },
  870.  
  871.         /**
  872.          *
  873.          * Public methods
  874.          *
  875.          */
  876.         destroy: function () {
  877.             var that = this;
  878.  
  879.             that.scroller.style[transform] = '';
  880.  
  881.             // Remove the scrollbars
  882.             that.hScrollbar = false;
  883.             that.vScrollbar = false;
  884.             that._scrollbar('h');
  885.             that._scrollbar('v');
  886.  
  887.             // Remove the event listeners
  888.             that._unbind(RESIZE_EV, window);
  889.             that._unbind(START_EV);
  890.             that._unbind(MOVE_EV, window);
  891.             that._unbind(END_EV, window);
  892.             that._unbind(CANCEL_EV, window);
  893.  
  894.             if (!that.options.hasTouch) {
  895.                 that._unbind('DOMMouseScroll');
  896.                 that._unbind('mousewheel');
  897.             }
  898.  
  899.             if (that.options.useTransition) that._unbind(TRNEND_EV);
  900.  
  901.             if (that.options.checkDOMChanges) clearInterval(that.checkDOMTime);
  902.  
  903.             if (that.options.onDestroy) that.options.onDestroy.call(that);
  904.         },
  905.  
  906.         refresh: function () {
  907.             var that = this,
  908.                 offset,
  909.                 i, l,
  910.                 els,
  911.                 pos = 0,
  912.                 page = 0;
  913.  
  914.             if (that.scale < that.options.zoomMin) that.scale = that.options.zoomMin;
  915.             that.wrapperW = that.wrapper.clientWidth || 1;
  916.             that.wrapperH = that.wrapper.clientHeight || 1;
  917.  
  918.             that.minScrollY = -that.options.topOffset || 0;
  919.             that.scrollerW = m.round(that.scroller.offsetWidth * that.scale);
  920.             that.scrollerH = m.round((that.scroller.offsetHeight + that.minScrollY) * that.scale);
  921.             that.maxScrollX = that.wrapperW - that.scrollerW;
  922.             that.maxScrollY = that.wrapperH - that.scrollerH + that.minScrollY;
  923.             that.dirX = 0;
  924.             that.dirY = 0;
  925.  
  926.             if (that.options.onRefresh) that.options.onRefresh.call(that);
  927.  
  928.             that.hScroll = that.options.hScroll && that.maxScrollX < 0;
  929.             that.vScroll = that.options.vScroll && (!that.options.bounceLock && !that.hScroll || that.scrollerH > that.wrapperH);
  930.  
  931.             that.hScrollbar = that.hScroll && that.options.hScrollbar;
  932.             that.vScrollbar = that.vScroll && that.options.vScrollbar && that.scrollerH > that.wrapperH;
  933.  
  934.             offset = that._offset(that.wrapper);
  935.             that.wrapperOffsetLeft = -offset.left;
  936.             that.wrapperOffsetTop = -offset.top;
  937.  
  938.             // Prepare snap
  939.             if (typeof that.options.snap == 'string') {
  940.                 that.pagesX = [];
  941.                 that.pagesY = [];
  942.                 els = that.scroller.querySelectorAll(that.options.snap);
  943.                 for (i=0, l=els.length; i<l; i++) {
  944.                     pos = that._offset(els[i]);
  945.                     pos.left += that.wrapperOffsetLeft;
  946.                     pos.top += that.wrapperOffsetTop;
  947.                     that.pagesX[i] = pos.left < that.maxScrollX ? that.maxScrollX : pos.left * that.scale;
  948.                     that.pagesY[i] = pos.top < that.maxScrollY ? that.maxScrollY : pos.top * that.scale;
  949.                 }
  950.             } else if (that.options.snap) {
  951.                 that.pagesX = [];
  952.                 while (pos >= that.maxScrollX) {
  953.                     that.pagesX[page] = pos;
  954.                     pos = pos - that.wrapperW;
  955.                     page++;
  956.                 }
  957.                 if (that.maxScrollX%that.wrapperW) that.pagesX[that.pagesX.length] = that.maxScrollX - that.pagesX[that.pagesX.length-1] + that.pagesX[that.pagesX.length-1];
  958.  
  959.                 pos = 0;
  960.                 page = 0;
  961.                 that.pagesY = [];
  962.                 while (pos >= that.maxScrollY) {
  963.                     that.pagesY[page] = pos;
  964.                     pos = pos - that.wrapperH;
  965.                     page++;
  966.                 }
  967.                 if (that.maxScrollY%that.wrapperH) that.pagesY[that.pagesY.length] = that.maxScrollY - that.pagesY[that.pagesY.length-1] + that.pagesY[that.pagesY.length-1];
  968.             }
  969.  
  970.             // Prepare the scrollbars
  971.             that._scrollbar('h');
  972.             that._scrollbar('v');
  973.  
  974.             if (!that.zoomed) {
  975.                 that.scroller.style[transitionDuration] = '0';
  976.                 that._resetPos(400);
  977.             }
  978.         },
  979.  
  980.         scrollTo: function (x, y, time, relative) {
  981.             var that = this,
  982.                 step = x,
  983.                 i, l;
  984.  
  985.             that.stop();
  986.  
  987.             if (!step.length) step = [{ x: x, y: y, time: time, relative: relative }];
  988.  
  989.             for (i=0, l=step.length; i<l; i++) {
  990.                 if (step[i].relative) { step[i].x = that.x - step[i].x; step[i].y = that.y - step[i].y; }
  991.                 that.steps.push({ x: step[i].x, y: step[i].y, time: step[i].time || 0 });
  992.             }
  993.  
  994.             that._startAni();
  995.         },
  996.  
  997.         scrollToElement: function (el, time) {
  998.             var that = this, pos;
  999.             el = el.nodeType ? el : that.scroller.querySelector(el);
  1000.             if (!el) return;
  1001.  
  1002.             pos = that._offset(el);
  1003.             pos.left += that.wrapperOffsetLeft;
  1004.             pos.top += that.wrapperOffsetTop;
  1005.  
  1006.             pos.left = pos.left > 0 ? 0 : pos.left < that.maxScrollX ? that.maxScrollX : pos.left;
  1007.             pos.top = pos.top > that.minScrollY ? that.minScrollY : pos.top < that.maxScrollY ? that.maxScrollY : pos.top;
  1008.             time = time === undefined ? m.max(m.abs(pos.left)*2, m.abs(pos.top)*2) : time;
  1009.  
  1010.             that.scrollTo(pos.left, pos.top, time);
  1011.         },
  1012.  
  1013.         scrollToPage: function (pageX, pageY, time) {
  1014.             var that = this, x, y;
  1015.  
  1016.             time = time === undefined ? 400 : time;
  1017.  
  1018.             if (that.options.onScrollStart) that.options.onScrollStart.call(that);
  1019.  
  1020.             if (that.options.snap) {
  1021.                 pageX = pageX == 'next' ? that.currPageX+1 : pageX == 'prev' ? that.currPageX-1 : pageX;
  1022.                 pageY = pageY == 'next' ? that.currPageY+1 : pageY == 'prev' ? that.currPageY-1 : pageY;
  1023.  
  1024.                 pageX = pageX < 0 ? 0 : pageX > that.pagesX.length-1 ? that.pagesX.length-1 : pageX;
  1025.                 pageY = pageY < 0 ? 0 : pageY > that.pagesY.length-1 ? that.pagesY.length-1 : pageY;
  1026.  
  1027.                 that.currPageX = pageX;
  1028.                 that.currPageY = pageY;
  1029.                 x = that.pagesX[pageX];
  1030.                 y = that.pagesY[pageY];
  1031.             } else {
  1032.                 x = -that.wrapperW * pageX;
  1033.                 y = -that.wrapperH * pageY;
  1034.                 if (x < that.maxScrollX) x = that.maxScrollX;
  1035.                 if (y < that.maxScrollY) y = that.maxScrollY;
  1036.             }
  1037.  
  1038.             that.scrollTo(x, y, time);
  1039.         },
  1040.  
  1041.         disable: function () {
  1042.             this.stop();
  1043.             this._resetPos(0);
  1044.             this.enabled = false;
  1045.  
  1046.             // If disabled after touchstart we make sure that there are no left over events
  1047.             this._unbind(MOVE_EV, window);
  1048.             this._unbind(END_EV, window);
  1049.             this._unbind(CANCEL_EV, window);
  1050.         },
  1051.  
  1052.         enable: function () {
  1053.             this.enabled = true;
  1054.         },
  1055.  
  1056.         stop: function () {
  1057.             if (this.options.useTransition) this._unbind(TRNEND_EV);
  1058.             else cancelFrame(this.aniTime);
  1059.             this.steps = [];
  1060.             this.moved = false;
  1061.             this.animating = false;
  1062.         },
  1063.  
  1064.         zoom: function (x, y, scale, time) {
  1065.             var that = this,
  1066.                 relScale = scale / that.scale;
  1067.  
  1068.             if (!that.options.useTransform) return;
  1069.  
  1070.             that.zoomed = true;
  1071.             time = time === undefined ? 200 : time;
  1072.             x = x - that.wrapperOffsetLeft - that.x;
  1073.             y = y - that.wrapperOffsetTop - that.y;
  1074.             that.x = x - x * relScale + that.x;
  1075.             that.y = y - y * relScale + that.y;
  1076.  
  1077.             that.scale = scale;
  1078.             that.refresh();
  1079.  
  1080.             that.x = that.x > 0 ? 0 : that.x < that.maxScrollX ? that.maxScrollX : that.x;
  1081.             that.y = that.y > that.minScrollY ? that.minScrollY : that.y < that.maxScrollY ? that.maxScrollY : that.y;
  1082.  
  1083.             that.scroller.style[transitionDuration] = time + 'ms';
  1084.             that.scroller.style[transform] = 'translate(' + that.x + 'px,' + that.y + 'px) scale(' + scale + ')' + translateZ;
  1085.             that.zoomed = false;
  1086.         },
  1087.  
  1088.         isReady: function () {
  1089.             return !this.moved && !this.zoomed && !this.animating;
  1090.         }
  1091.     };
  1092.  
  1093.     function prefixStyle (style) {
  1094.         if ( vendor === '' ) return style;
  1095.  
  1096.         style = style.charAt(0).toUpperCase() + style.substr(1);
  1097.         return vendor + style;
  1098.     }
  1099.  
  1100.     dummyStyle = null;    // for the sake of it
  1101.  
  1102.     if (typeof exports !== 'undefined') exports.iScroll = iScroll;
  1103.     else window.iScroll = iScroll;
  1104.  
  1105. })(window, document);

实际效果图

使用jquery结合ajax做下拉刷新页面，上拉加载页面，俗称分页的更多相关文章

  1. Android如何定制一个下拉刷新，上滑加载更多的容器

    前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...

  2. Android之下拉刷新，上啦加载的实现（一）

    转载地址http://blog.csdn.net/leehong2005/article/details/12567757#t5 前段时间项目中用到了下拉刷新功能,之前在网上也找到过类似的demo,但 ...

  3. react + iscroll5 实现完美 下拉刷新，上拉加载

    经过几天的反复折腾,总算做出一个体验还不错的列表页了,主要支持了下拉刷新,上拉加载两个功能. 一开始直接采用了react-iscroll插件,它是基于iscroll插件开发的组件.但是开发过程中,发现 ...

  4. iscroll 下拉刷新，上拉加载

    新手,直接贴代码了 <!DOCTYPE html><html class=""><head lang="en"><me ...

  5. 【Web】移动端下拉刷新、上拉加载更多插件

    移动网站中常常有的功能:列表的下拉刷新.上拉加载更多 本例介绍一种简单使用的移动端下拉刷新.上拉加载更多插件,下载及参考地址:https://github.com/ximan/dropload 插件依 ...

  6. 使用MUI框架，模拟手机端的下拉刷新，上拉加载操作。

    套用mui官方文档的一句话:“开发者只需关心业务逻辑,实现加载更多数据即可”.真的是不错的框架. 想更多的了解这个框架:http://dev.dcloud.net.cn/mui/ 那么如何实现下拉刷新 ...

  7. iOS MJRefresh下拉刷新（上拉加载）使用详解

    下拉刷新控件目前比较火的有好几种,本人用过MJRefresh 和 SVPullToRefresh,相对而言,前者比后者可定制化.拓展新都更高一点. 因此本文着重讲一下MJRefresh的简单用法. 导 ...

  8. 微信小程序开发之 下拉刷新，上拉加载更多

    本文记载了如何在微信小程序里面实现下拉刷新,上拉加载更多 先开看一下界面 大致如此的界面吧. 这个Demo使用了微信的几个Api和事件,我先列出来. 1.wx.request (获取远程服务器的数据, ...

  9. Android打造(ListView、GridView等)通用的下拉刷新、上拉自动加载的组件

    原文 http://blog.csdn.net/bboyfeiyu/article/details/39253051       前言 下 拉刷新组件在开发中使用率是非常高的,基本上联网的APP都会采 ...

  10. iScroll示例，下拉刷新，上拉刷新

    iScroll示例,下拉刷新,上拉刷新 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

随机推荐

  1. Java开发笔记（一百零六）Fork+Join框架实现分而治之

    前面依次介绍了普通线程池和定时器线程池的用法,这两种线程池有个共同点,就是线程池的内部线程之间并无什么关联,然而某些情况下的各线程间存在着前因后果关系.譬如人口普查工作,大家都知道我国总人口为14亿左 ...

  2. Python基础系列讲解-自动控制windows桌面

    原链接:https://zhuanlan.zhihu.com/p/73001806 在使用PC时与PC交互的主要途径是看屏幕显示.听声音,点击鼠标和敲键盘等等.在自动化办公的趋势下,繁琐的工作可以让程 ...

  3. github中的各种操作

    1.上传文件到github 如图,你现在有三个项目在一个文件夹中,我们要把它上传到自己的github仓库中,该怎么做呢? 1.首先右击空白处,点击Git Bash Here,出现命令行 2. git ...

  4. python3与Excel的完美结合

    https://segmentfault.com/a/1190000016256490 Excel 是 Windows 环境下流行的.强大的电子表格应用.openpyxl 模块让 Python 程序能 ...

  5. Online Hard Example Mining 理解

    Definition: Online Hard Example Mining (OHEM) is a way to pick hard examples with reduced computatio ...

  6. Windows中的消息与消息队列

    消息 在Windows中,消自由MSG结构体表示 typedef struct tagMSG { HWND hwnd; UINT message; WPARAM wParam; LPARAM lPar ...

  7. OpenWrt 中查看 Flash RAM CPU 信息

    OpenWrt 中查看 Flash RAM CPU 信息 来源  https://blog.csdn.net/mcusun2000/article/details/51130434 硬件: QCA95 ...

  8. Xcodeproj相关以及删除 多层文件夹、库、资源逻辑

    一.介绍Xcodeproj是CocoaPods用ruby开发的一个插件库,可以用来新建.修改Xcode工程. 二.wiki和资源Xcodeproj wiki   :https://www.rubydo ...

  9. jq + 面向对象实现拼图游戏

    jq + 面向对象实现拼图游戏 知识点 拖拽事件 es6面向对象 jquery事件 效果图 html: <div class="wraper"> <div cla ...

  10. JavaScript之获取标签

    (1)html <p id="txt">这是P标签</p> <h1 id="txt" style="color: red ...