jquery - 更新列表时，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() 来解决

查看更新的小提琴

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

myScroll = new iScroll('wrapper', { myScroll.refresh(),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);