將內容插入頁面頂部而不滾動

有沒有一種方法可以將內容插入網頁的開頭，而不會導致頁面產生向上滾動的印象。將內容插入頁面頂部而不滾動

我試圖實現某種類似無限滾動，但我需要能夠向上滾動無限以及向下（我也卸載另一端的內容，使滾動條不成爲無限小，應用程序不佔用太多的內存）。

我很高興使用JavaScript，我寧願不使用庫（我試圖保持較輕的重量）。

任何想法？

2011-12-12 jcuenod

Google+已經這麼做了。只需嘗試在其Feed中向下滾動https://plus.google.com/s/a等熱門搜索。無需更改滾動位置即可將新項目無縫添加到頁面的頂部。看起來他們正在使用虛假滾動條，固定位置和偏移量的組合，儘管我還沒有時間對頁面上的大量容器進行排序以確認它們是如何完成的。 –

一個可能的想法是完全繞過滾動機制，並做你自己的。

基本上，用display: fixed來定位每個元素。然後您可以使用負位置在屏幕上方加載元素。

您必須同步文檔的高度（只需添加空白），以便文檔滾動條正確。然後，您將捕獲滾動事件並調整頁面內所有元素的固定位置。

我不確定它會有多光滑，但我相當肯定你可以得到你正在尋找的效果。

2011-12-12 16:35:27

我一直在想這樣的事情，我只是希望會有一些神祕的document.prepend或其他東西... – jcuenod

是啊，我不知道的。任何時候你有瀏覽器爲你做佈局，在DOM中插入元素會混亂你的滾動位置，你會遇到重繪問題。也許這就是爲什麼沒有人做負面無限滾動？ :) –

@ j3frea - 我剛剛注意到，Facebook實際上是在查看一條長消息線程並向上滾動時實現這一點。並且滾動位置沒有跳躍或晃動。我想你可以嘗試反向工程他們是如何做到的:) –

您可以使用window.scrollBy(x, y)在添加內容時向下滾動（您必須計算添加內容的高度）。

2011-12-12 16:06:35 Viruzzo

問題是，這實際上涉及滾動兩次，然後因爲內容向下移動然後移回。我正在尋找（最好）不需要重繪的東西 – jcuenod

執行代碼來創建你的元素之前，簡單地做這樣的事情：

var scrollY = window.scrollY; 

window.onscroll = function(){ 
    window.scrollTo(0, scrollY); 
    window.onscroll = null; 
};

請記住，如果你已經有了一個onscroll功能，則需要在此之後重新分配功能.. 。

2017-12-02 23:37:18

回答