Infinite Bildlauf: set scrollTop() so dass die Seite nicht verschiebt

Question

Ich füge ein Kind Element zu einem Container mit fester Höhe und Überlauf: scroll. Ich möchte, dass sich die Innenseiten NICHT verschieben, selbst wenn das Element vor dem ersten Kind hinzugefügt wird (wie bei unendlichem Scrollen).

Ich versuche, den ScrollTop zu setzen, aber es hat keine Wirkung.

$("#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

Interessantes Problem! Es ist irgendwie seltsam für eine unendliche Schriftrolle, die neuen Elemente voranzustellen, anstatt sie anzuhängen, aber OK, lass uns einen Blick darauf werfen.

Zunächst einmal, die

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

wird nichts tun, weil #parent_insides nicht das Scrollen div ist. #parent ist, also sollten wir etwas damit machen. Aber ich denke, ich fand eine einfachere Lösung als alle Höhen- und Positionsberechnungen ... :-)

Ich habe festgestellt, dass das Standardverhalten meines Browsers (ich verwende Chrome) darin besteht, das Innere überhaupt nicht zu verschieben , solange ich nicht oben bin (was nicht passieren wird, wenn Leute scrollen, wenn Inhalte hinzugefügt werden). Also, was ich getan habe, ist eine einfache Umgehung, wo ich die Standard-Scroll-Position der #parent Offset '1' gesetzt habe, und jetzt, wenn ich auf die Schaltfläche ADD it klicken, Inhalte nicht verschieben (ich bleibe genau dort, wo ich Uhr, aber das blaue div auf der Oberseite hinzugefügt):

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

denke ich, dieses Verhalten ist beabsichtigt Browser: der Inhalt wird dabei nach unten verschieben, wenn ich auf der absoluten Spitze bin, aber wenn ich nach unten gescrollt (auch nur ein Pixel) Ich möchte bleiben, wo ich bin. Wenn Inhalt hinzugefügt wird, sollte sich meine Bildlaufposition daher nicht verschieben. Ich habe es noch nicht in anderen Browsern getestet, aber ich denke, es ist ein cooles Workaround :-)