當列表更新時，iScroll跳轉到列表頂部

Question

我使用JSON和iScroll製作動態列表，它的工作原理非常完美。問題是我的列表每20秒更新一次，每次列表更新時都會跳轉到列表頂部。我如何通過這個？

這裏是我的腳本：

var myScroll; 

hoverClassRegEx = new RegExp('(^|\\s)iScrollHover(\\s|$)'), 
removeClass = function() { 
    if (this.hoverTarget) { 
     clearTimeout(this.hoverTimeout); 
     this.hoverTarget.className = this.hoverTarget.className.replace(hoverClassRegEx, ''); 
     this.target = null; 
    } 
}; 

$(document).on('pageshow', function(){ 
    var userid=1, 

    dataUrl = 'http://mypage.com/playermenu.php?callback=?&userid=' + userid, 
    dataCallback = function (data) { 
     var content = []; 
     //var profile = []; 
     $.each(data, function (i, val) { 
      content.push(val.list); // GETTING ALL THE GAMES // 
      $('#userbar').html(val.profile); // FETCHING USERS DATA FOR PROFILEBAR // 
     }); 
     $('#games').html(content.join('')).listview('refresh'); 
    }, 
    fetchData = function() { 
     //myScroll = new iScroll('wrapper'); 
     //myScroll = new iScroll('wrapper', { checkDOMChanges: true, hScrollbar: false, vScrollbar: false }); 
     myScroll = new iScroll('wrapper', { checkDOMChanges: true, hScrollbar: false, vScrollbar: false, 
      onBeforeScrollStart: function (e) { 
       var target = e.target; 

       clearTimeout(this.hoverTimeout); 

       while (target.nodeType != 1) target = target.parentNode; 

       this.hoverTimeout = setTimeout(function() { 
        if (!hoverClassRegEx.test(target.className)) target.className = target.className ? target.className + ' iScrollHover' : 'iScrollHover'; 
       }, 80); 

       this.hoverTarget = target; 

       e.preventDefault(); 
      }, 
      onScrollMove: removeClass, 
      onBeforeScrollEnd: removeClass 
     }); 
     if (myScroll.isReady()){ 
      $.getJSON(dataUrl, dataCallback); 
     } 
    }; 
    fetchData(); 
    setInterval(fetchData, 20000); 

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
    document.addEventListener('DOMContentLoaded', function() { setTimeout(loaded, 200); }, false); 

}); 

提前希望能幫助和感謝:-)

Answer 1

這就是所謂的「橡皮筋效應」，並且通過使用myScroll.refresh solcved（）

查看更新後的小提琴

http://jsfiddle.net/VmQeE/10/

myScroll =新iScroll（ '包裝'，{ myScroll.refresh（），checkDOMChanges：真，HScrollBar控件：假， vScrollbar：假，onBeforeScrollStart：功能（E）{ VAR目標= e.target;

  clearTimeout(this.hoverTimeout); 

      while (target.nodeType != 1) target = target.parentNode; 

      this.hoverTimeout = setTimeout(function() { 
       if (!hoverClassRegEx.test(target.className)) target.className = target.className ? target.className + ' iScrollHover' : 

'iScrollHover'; 80）;