在不影響滾動位置的情況下，將項目連續地添加到列表中

問題：我遇到的問題是，當項目被預先添加到列表中時，瀏覽器嘗試自動將項目滾動到視圖中，導致非常明顯的跳轉。在不影響滾動位置的情況下，將項目連續地添加到列表中

我檢查，如果用戶是100像素遠離文檔的頂部：

var scrollTop = function() { 
    var scrollPos = $(window).scrollTop(), 
     direction = window.direction == 'up', 
     history = session.lastSessionEntry(); 

    if (direction && scrollPos < 100) { 
     if (history > 1) { 
     getPreviousPage(); 
     } else { 
     prependHero(); 
     } 
    } 
    };

然後了前一頁，無論是從localStorage的加載或API：

var getPreviousPage = function() { 
    var page = session.lastSessionEntry() - 1, 
     cached = isCached([localStorage.getItem(page)]); 

    if (cached) { 
     renderResponse('prepend', localStorage.getItem(page)); 
    } else { 
     $.ajax({ 
     url: '/collections/paginated_collection/?collection_name='+ settings.collection_name +'&page='+ page +'&results_per_page=' + settings.results_per_page, 
     success: function (response, xhr) { 
      renderResponse('prepend', response); 
     }, 
     }); 
    } 
    };

最後頁面呈現給DOM：

var renderResponse = function(method, response) { 
    var el = $('<div></div>'), 
     output = el.html(response), 
     page = output.find('section').attr('data-section'); 

    if (!$('section[data-section="'+ page +'"]').length && response != 'undefined') { 

     if (method == 'append') 
     settings.render_outlet.append(response); 
     else 
     settings.render_outlet.prepend(response); 

     clearLoader(); 

    } else { 
     return 
    } 
    };

能夠實現像這樣的東西真是太棒了無明顯帆布：

http://engineering.flipboard.com/2015/02/mobile-web/

我知道這是很難幫助沒有功能的代碼，但如果有人能下降一些理論知識對我或只是一般點我在正確的方向，我將不勝胃口吧。

在此先感謝。

來源

2015-11-22 macksol

-1

我發現我可以使用preventDefault（）來防止一些默認操作。這是一個jQuery事件控制器。看看這個： http://api.jquery.com/event.preventdefault/ 希望這會有幫助：D

來源

2015-11-22 04:37:52 Tek

不幸的是默認的滾動行爲不能被阻止。 – macksol

@macksol如何在url中存儲滾動位置然後在頁面加載時恢復它？ – Tek

在不影響滾動位置的情況下，將項目連續地添加到列表中

回答

相關問題