Wie kann man das Scrollen beim Voranstellen verhindern?

Lesezeit: 3 Minuten

Benutzer-Avatar
schick

Ich stelle den Inhalt oben auf den Körper. Manchmal kann dieser Inhalt 400-500 Pixel groß sein, und wenn so etwas hinzugefügt wird, kann es wirklich ärgerlich sein, den Inhalt beim Lesen der Seite nach unten zu drücken.

Ich möchte, dass die Elemente automatisch vorangestellt werden, nicht so etwas wie Klicken Sie hier, um neue Elemente anzuzeigen.

Gibt es eine Möglichkeit, diesen Inhalt dem Textkörper voranzustellen, ohne die Seite zu verschieben? Wenn ein Benutzer dann nach oben scrollt, ist er einfach schon da?

Ich glaube, der universellste Weg, dies zu tun, wäre, einfach die Dokumenthöhe vor und nach der Änderung zu messen:

var old_height = $(document).height();  //store document height before modifications
var old_scroll = $(window).scrollTop(); //remember the scroll position

//do anything
$("p:first").prepend( "<p>I just became first</p>" );

$(document).scrollTop(old_scroll + $(document).height() - old_height); //restore "scroll position"

Auf diese Weise können Sie wirklich alles tun, ohne dass sich das Fenster vom Inhalt wegbewegt, den Sie gerade lesen 🙂

  • Mit diesem Ansatz hatte ich bisher das beste Glück.

    – Patrick

    18. September 2015 um 13:46 Uhr

  • Nachdem ich das ganze Internet durchsucht und alle möglichen Lösungen ausprobiert habe, ist dies die einzige, die ich bisher für meinen Anwendungsfall gefunden habe.

    – Juampa

    1. Dezember 2015 um 5:39 Uhr

  • Tolle Lösung! Verwenden Sie .scrollHeight() -oder .prop(“scrollHeight”) in jQ- anstelle von .height(), wenn Sie ein div mit der Eigenschaft overflow-y: scroll haben.

    – Diego García

    29. April 2020 um 11:56 Uhr

Ich habe es in der Vergangenheit getan, indem ich die Elemente vorangestellt, dann ihre gesamte äußere Höhe berechnet und das Scrolltop auf diesen Wert gesetzt habe. Etwas wie das:

var $current_top_element = $('body').children().first();
$('body').prepend(other_elements);

var previous_height = 0;
$current_top_element.prevAll().each(function() {
  previous_height += $(this).outerHeight();
});

$('body').scrollTop(previous_height);

Hoffe, das weist Sie in die richtige Richtung.

  • Ich habe alle drei Antworten versucht. Dies ist die beste Lösung.

    – Jacob

    20. Dezember 2016 um 9:51 Uhr

Ich habe einen etwas anderen Ansatz gewählt:

Beginnen Sie damit, das erste Element des Körpers zu erhalten (oder eines anderen Elements, wenn Sie ein anderes Element als den Körper vorgeben, was ich brauchte), und verwenden Sie dann, nachdem Sie den neuen Satz von Elementen vorangestellt haben, die versetzt (wenn Sie relativ zum Körper scrollen müssen) oder die Position (falls relativ zu einem Vorfahrenelement gescrollt werden muss) Funktion auf dem ursprünglichen ersten Element, um seine aktualisierten Koordinaten zu erhalten und zu diesem Punkt zu scrollen.

Etwas wie:

var current_top_element = $('body').children().first();
$('body').prepend(other_elements);

$('body').scrollTop(current_top_element.offset().top);

Oder für etwas anderes als Body Scroll:

var current_top_element = $('#ul-element-id li:first'); //example with a list
$('#ul-element-id').prepend(other_elements);

$('#ul-element-id').scrollTop(current_top_element.position().top);

Beachten Sie, dass Position() gibt die Position des Elements relativ zu seinem zurück versetzter Elternteil stellen Sie also sicher, dass Sie das CSS-Positionsattribut Ihres übergeordneten Elements nach Bedarf festlegen ( http://api.jquery.com/offsetParent/ )

Weitere Einzelheiten finden Sie unter:
http://api.jquery.com/category/offset/

Ich weiß, ich bin sehr spät zu diesem Thema. Tut mir leid, dass ich es ausgegraben habe, aber ich habe einen sehr einfachen Weg gefunden, um zu verhindern, dass nach oben gescrollt wird, wenn Sie dem Körper Elemente voranstellen.

Das automatische Scrollen wird angehängt, wenn die Scroll-Y-Position bei Null ist. Einfach so machen:

element.scrollTo(0, 1);

Und Ihr Element wird nach dem Präpendieren nicht automatisch nach oben gehen.

Für diese Vanille-JS-Lösung funktionierte:

const currentFirstElement = parentElement.firstChild
      elementsToPrepend.forEach((element) => {
         parentElement.prepend(element)

         // keep the current first element in the view port
         currentFirstElement.scrollIntoView(
           {
             block: 'start',
             behavior: 'auto',
           }
         )
})

1246110cookie-checkWie kann man das Scrollen beim Voranstellen verhindern?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy