無限滾動：設置scrollTop（），使頁面不移動

Question

我正在向具有固定高度和溢出的容器添加一個子元素：滾動。即使元素在第一個子元素之前添加，我也希望內部不要移位（如無限滾動）。

我想設置scrollTop，但它沒有任何效果。

$("#button").on("click", function(){ 
 
     var height = $("#parent_insides").height(); 
 
     var scroll_y = $("#parent_insides").offset().top; 
 

 
     $("#parent_insides").prepend($("#childpre")); 
 
     var new_height = $("#parent_insides").height(); 
 
     var new_scroll_y = scroll_y - (new_height - height); 
 

 
     $("#parent_insides").scrollTop(new_scroll_y); 
 

 
    })

#parent{ 
 
     height:200px; 
 
     overflow:scroll; 
 
    } 
 

 
    .child1{ 
 
     height:300px; 
 
     background:red; 
 
    } 
 

 
    #childpre{ 
 
     height:300px; 
 
     background:blue; 
 
    } 
 

 
    #button{ 
 
     width:200px; 
 
     background:yellow; 
 
     height:40px; 
 
     line-height:40px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id = "parent"> 
 
     <div id = "parent_insides"> 
 
      <div class = "child1"> 
 
       hello 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div id = "button"> Add element above 
 
    </div> 
 

 
    <div id = "childpre"> 
 
     hello 
 
    </div>

Answer 1

有趣的問題！對於無限的滾動來說，添加新的元素而不是附加它們是有點奇怪的，但是好的，讓我們來看看。

首先，在

$("#parent_insides").scrollTop(new_scroll_y); 

不會做任何事，因爲#parent_insides不是滾動股利。 #parent是，所以我們應該這樣做。不過，我認爲我找到了比所有高度和位置計算更容易的解決方案... :-)

我注意到我的瀏覽器的默認行爲（我使用的是Chrome）是根本不轉移內部，只要我不在頂部（如果人們在添加內容時滾動下來，則不會發生這種情況）。所以我所做的是一個簡單的解決方法，我已經設置了#parent的默認滾動位置來抵消'1'，現在，當我點擊ADD it按鈕時，內容不會移動（我仍然在我的位置早上，但是藍格是在頂部增加）：

https://jsfiddle.net/fmsd5b4y/4/

我認爲這是爲了瀏覽器行爲：內容將下移，如果我在絕對頂級，但如果我向下滾動（即使只是一個像素）我想留在我的位置，因此，如果內容被添加，我的滾動位置不應該移位。還沒有在其他瀏覽器中測試過，但我認爲這是一個很酷的解決方法:-)