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);