0

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

});

事前に助けと感謝を願っています:-)

4

1 に答える 1

0

これは「ラバー バンド効果」として知られており、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);

于 2013-04-22T13:49:57.393 に答える