無限スクロール：ページがシフトしないようにscrollTop（）を設定します。

Question

固定高さとオーバーフローを持つコンテナに子要素を追加します：scroll。最初の子の前に要素が追加されていても内部がシフトしないようにしたい（無限スクロールのように）。

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

興味深い問題！無限のスクロールを追加するのではなく、新しい要素を追加するのは奇妙なことですが、OKを見てみましょう。 #parent_insidesスクロールdiv要素ではないので

まず第一に、

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

は何もしません。 #parentですので、これで何かする必要があります。しかし、私はすべての高さと位置の計算よりも簡単な解決策を見つけたと思う：...-)

私はブラウザのデフォルトの動作（私はChromeを使用している）が内部をまったく移動しないことに気づいた私がトップにいない限り（コンテンツが追加されたときに人々がスクロールしている場合は起こりません）。だから私がしたのは、単純な回避策で、#parentのデフォルトのスクロール位置を '1'に設定しました。そして今、ADD itボタンをクリックすると、コンテンツはシフトしません。ですが、青のdivを上に追加されます）：

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

私は、これは意図したブラウザの動作だと思う。でも、（私は絶対上だ場合の内容がシフトダウンしますが、私はスクロールダウン場合ちょうど1ピクセル）私は私がどこにいたいので、コンテンツが追加されると、私のスクロール位置がシフトしてはならない。まだ他のブラウザではテストしていませんが、すばらしい回避策だと思います:-)