iScroll.js 向上滑動異步加載數據回彈問題

iScroll是一款用於移動設備web開發的一款插件。像縮放、下拉刷新、滑動切換等移動應用上常見的一些效果均可以輕鬆實現。

如今最新版本是5.X，官網這裏：http://iscrolljs.com/

下面是按照官網給的Demo，寫的一個異步加載數據實例：

  1 <title>iScroll demo: click</title>
  2 <script src="~/Scripts/iscroll5/jquery-1.10.2.js"></script>
  3 <script src="~/Scripts/iscroll5/iscroll-probe.js"></script>
  4 <script type="text/javascript">
  5     $(function () {
  6         upajaxload();
  7 
  8         var myScroll = new IScroll('#wrapper', {
  9             mouseWheel: false,  //是否監聽鼠標滾輪事件
 10             bounceTime: 600,       //彈力動畫持續的毫秒數
 11             probeType: 3
 12         });
 13 
 14         var handle = 0;//初始爲0，無狀態；1表示下拉，2表示上拉
 15         myScroll.on('scroll', function () {
 16             if (this.y > 5) {
 17                 handle = 1;
 18             } else if (this.y < (this.maxScrollY - 5)) {
 19                 handle = 2;
 20 
 21             };
 22         });
 23 
 25         function upajaxload() {
 26             $.ajax({ 28                 type: 'POST',
 29                 url: '/Home/GetData',
 30                 success: function (data) {
 31                     $(data).each(function (i, d) {
 32                         $("#scroller").append('<p>' + d + '</p>');
 33                     });
 34                 }
 35             }); 39         };
 40 
 41         myScroll.on('scrollEnd', function () {
 42             if (handle === 2) {
 43                 upajaxload();
 44             }
 45             handle = 0;
 46             myScroll.refresh();
 47         });
 48         document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
 49     });
 50 </script>
 51 
 52 <style type="text/css">
 53     #header {
 54         position: absolute;
 55         z-index: 2;
 56         top: 0;
 57         left: 0;
 58         width: 100%;
 59         height: 45px;
 60         line-height: 45px;
 61         background: #CD235C;
 62         padding: 0;
 63         color: #eee;
 64         font-size: 20px;
 65         text-align: center;
 66         font-weight: bold;
 67     }
 68 
 69     #wrapper {
 70         position: absolute;
 71         z-index: 1;
 72         top: 45px;
 73         bottom: 48px;
 74         left: 0;
 75         width: 100%;
 76         background: #ccc;
 77         overflow: hidden;
 78     }
 79 
 80     #scroller {
 81         position: absolute;
 82         z-index: 1;
 83         -webkit-tap-highlight-color: rgba(0,0,0,0);
 84         width: 2000px;
 85         -webkit-transform: translateZ(0);
 86         -moz-transform: translateZ(0);
 87         -ms-transform: translateZ(0);
 88         -o-transform: translateZ(0);
 89         transform: translateZ(0);
 90         -webkit-touch-callout: none;
 91         -webkit-user-select: none;
 92         -moz-user-select: none;
 93         -ms-user-select: none;
 94         user-select: none;
 95         -webkit-text-size-adjust: none;
 96         -moz-text-size-adjust: none;
 97         -ms-text-size-adjust: none;
 98         -o-text-size-adjust: none;
 99         text-size-adjust: none;
100         background: #fff;
101     }
102 
103     p {
104         font-size: 16px;
105         padding: 1.2em;
106     }
107 </style>
108 <div id="header">iScroll</div>
109 
110 <div id="wrapper">
111     <div id="scroller">
112     </div>
113 </div>

 

上面的Demo有個問題，就是每次向上滑動結束以後，異步加載完成數據，再向上滑動查看加載的數據時，滑不上去，會回彈。

初步判斷是Ajax異步加載修改了DOM結構致使的問題，去官網看了下也沒說，本身摸索了一下，Ajax改爲同步問題就解決。

    function upajaxload() {
            $.ajax({
                async: false,
                type: 'POST',
                url: '/Home/GetData',
                success: function (data) {
                    $(data).each(function (i, d) {
                        $("#scroller").append('<p>' + d + '</p>');
                    });
                }
            });
        };

 

改爲同步，問題解決。