保持頁面的位置，同時頁面長度變化

的頁面是4000個像素長。
用戶向下滾動頁面，因此1000個像素的內容隱藏在視口上方。

然後，用戶點擊一個按鈕，和任意長度的內容經由AJAX加載在頁面的頂部，按下按鈕（和該內容的用戶在看）視口的下方。

我試着寫了一個Javascript回調向下滾動到用戶在點擊按鈕之前查看的內容，但體驗並不是無縫的（當插入新內容後滾動「向上」，然後是向下滾動「向下」）。

有沒有什麼辦法讓視口固定在用戶正在看的內容上？

這是一個簡化的例子，但應該得到重點。

<div style="height: 1000px; width:1000px;" id="top-div">some content above the fold</div> 
<button id="button">Click Me</button> 
<img src="img.jpg" alt="Some image the user was looking at when they clicked the button." /> 

<script> 
$("button").click(function() { 
    $.get('/new/content', function(response) { 
     $("#top-div").before(response); 
    }); 
}); 
</script>

來源

2013-01-09 Kevin Burke

如何開始工作小提琴，所以我們不必自己設置整個東西？ :) –

在正在查看的內容下添加新內容。 – kennebec

在這種情況下不是一個選項... –

看看這個小提琴： http://jsfiddle.net/FYEYB/

這裏的重要代碼：

$("button").click(function() { 
    //cache the org height 
    var orgHeight = $("#content").height(); 
    //run your ajax request. 
    mockAjax(function() { 
    //in the callback ajust the height 
    $(window).scrollTop($(window).scrollTop() + $("#content").height() - orgHeight); 
    }); 
});

基本上在你的Ajax請求的回調，加上在容器中的高度差什麼它之前。您可能需要添加一張支票以確保新內容確實被添加到視口之上，但我會讓您弄清楚。

來源

2013-01-09 21:27:01 InvisibleBacon

有趣，我會試試看！ –

（我知道我沒有問過上面的問題，但是我遇到的實際問題涉及多個HTTP請求，我認爲如果將它簡化爲1就可以了，可悲的是這種方法導致頁面滾動太多。 –

請注意，此答案適用於在當前滾動位置上方加載的內容，但不在下方。如果動態內容低於視口，則滾動位置不應更改。此答案仍然會將差異添加到當前滾動位置。 –

延遲顯示新內容

的最接近想到的是延遲顯示新的內容，直到它的內部或視口下方的一流解決方案。換句話說，不要更改視口上方的任何主要佈局元素的高度;當它們位於視口內或視口下方時更改它們，但不會造成任何傷害。 在安全的情況下顯示它們。

例如，用戶滾動到非常高的頁面的底部三分之一處。當他們在那裏時，一些新的或不同大小的Ajax內容會在頁面頂部附近加載，但它尚未顯示。用戶通過頁面向上滾動，一旦所有受影響的佈局區域滾動到視圖中，就會顯示新內容，就好像它剛剛加載一樣。

基本上，當加載Ajax內容時，檢索佈局元素的滾動位置，並根據頁面的當前滾動位置顯示內容或將其添加到隊列中。無論何時用戶滾動頁面或點擊錨標籤（或任何改變頁面滾動位置的操作），請檢查隊列以查看是否還有需要顯示的內容，並確定它現在是否可以安全顯示。

使內容可摺疊

另一種選擇是讓Ajax內容出現在可摺疊的格式。它最初可以以不影響頁面佈局的小尺寸顯示（如果佈局元素位於視口上方）。然後，用戶可以點擊內容以在摺疊格式和完整版本之間切換，或者在前一個想法的變體中，當佈局元素滾動到視圖中時它可以自動擴展。

來源

2013-01-09 23:00:27

保持頁面的位置，同時頁面長度變化

回答

相關問題