Funktioniert scrollIntoView in allen Browsern?

82

Funktioniert scrollIntoView()in allen Browsern? Wenn nicht, gibt es eine jQueryAlternative?

javascript jquery js-scrollintoview

— 9-Bit
quelle

81

Es wird ja unterstützt, aber die Benutzererfahrung ist ... schlecht.

Wie @ 9bits hervorhob, wird dies seit langem von allen gängigen Browsern unterstützt . Mach dir darüber keine Sorgen. Das Hauptproblem ist die Art und Weise, wie es funktioniert. Es springt einfach zu einem bestimmten Element, das sich auch am Ende der Seite befinden kann. Durch das Springen haben Benutzer keine Ahnung, ob:

Seite wurde nach oben gescrollt
Seite wurde nach unten gescrollt
Sie wurden an eine andere Stelle umgeleitet

Die ersten beiden können durch die Bildlaufposition bestimmt werden, aber wer sagt, dass Benutzer die Bildlaufposition verfolgt haben, bevor der Sprung ausgeführt wurde? Es ist also eine nicht deterministische Handlung.

Die letzte kann zutreffen, insbesondere wenn die Seite einen beweglichen Header hat, der aus der Ansicht gescrollt wird, und das verbleibende Seitendesign nichts bedeutet, dass sie sich auf derselben Seite befindet (wenn sie auch kein vertikales Element mit Gesamthöhe wie das linke Menü enthält Bar). Sie wären überrascht, wie viele Seiten dieses Problem haben. Schau sie dir einfach selbst an. Gehen Sie zu einer Seite, sehen Sie sie sich oben an, drücken Sie die EndTaste und sehen Sie sie sich noch einmal an. Es ist wahrscheinlich, dass Sie denken, dass es sich um eine andere Seite handelt.

Animiertes `scrollintoview`jQuery-Plugin zur Rettung

Aus diesem Grund gibt es immer noch Plugins, die einen Bildlauf in die Ansicht durchführen, anstatt die native DOM-Funktion zu verwenden. Sie animieren normalerweise das Scrollen, wodurch alle drei oben beschriebenen Probleme beseitigt werden. Benutzer können die Bewegung leicht verfolgen.

— Robert Koritnik
quelle

1

Hinweis: Das jQuery-Plugin funktioniert nicht (rechts), wenn sich das gescrollte Element in einem Iframe befindet (aus offensichtlichen Gründen). element.scrollIntoView funktioniert auch dann noch.

— Panzi

7

Die neue Spezifikation mit ScrollIntoViewOptionsermöglicht die Angabe behavior: 'smooth'. Leider kann man nicht leicht erkennen, ob diese Option in einem Browser unterstützt wird…

— fliegende Schafe

6

Firefox scheint zu unterstützen behavior: "smooth", aber nicht Chrome oder Safari.

— Flimm

1

Dies ist nützlich, wenn Sie beispielsweise ein benutzerdefiniertes Dropdown-Menü erstellen möchten, in dem die Pfeiltasten nach oben / unten steuern und das Menü je nach ausgewähltem Element einen Bildlauf durchführt. Es wäre eine schlechte Benutzererfahrung, wenn es in diesem Fall nicht sofort zwischen Elementen springen würde.

— user2867288

1

@Flimm weder in IE / Edge. Siehe Referenz , nur FF36 + hat diese Funktion. Daher ist es leider nutzlos.

— Alex Zhukovskiy

13

Sieht so aus: http://www.quirksmode.org/dom/w3c_cssom.html

— 9-Bit
quelle

3

Ich benutze Matteo Spinnellis iScroll-4 und er funktioniert auch in iOS-Safari. Es gibt drei Methoden: scrollTo, scrollToElement und scrollToPage. Angenommen, Sie haben eine ungeordnete Liste von Elementen in einem div. Wie Robert Koritnik oben geschrieben hat, benötigen Sie diese leichte Animation, um zu zeigen, dass Sie gescrollt haben. Die folgende Methode erzielt diesen Effekt.

scrollToElement(element, time);

— Thandasoru
quelle

2

Ihr Link zu iScroll-4 ist tot

— Romain Vincent

1

Habe dies nicht ausprobiert, aber es scheint, als würde ein Huckepack auf der eingebauten scrollIntoView-Funktion viel Code sparen. Folgendes würde ich tun, wenn Sie animierte Aktionen wünschen:

Cache die aktuelle Bildlaufposition des Containers als START POSITION
Führen Sie die in scrollIntoView integrierte Version aus
Zwischenspeichern Sie die Bildlaufposition erneut als ENDPOSITION
Stellen Sie den Behälter wieder auf START POSITION
Animieren Sie das Scrollen zu END POSITION

— Lex
quelle

1

Lesen Sie bitte über scrollIntoViewIfNeeded

if(el.scrollIntoViewIfNeeded){
el.scrollIntoViewIfNeeded()
}else{
el.scrollIntoView()
}

— zloctb
quelle

0

Sie können jQuery alternativ und animieren <html>und <body>Elemente verwenden:

$('html, body').animate({
  scrollTop: $("#myElem").offset().top
}, 1000);

— S1awek
quelle

Funktioniert scrollIntoView in allen Browsern?

Es wird ja unterstützt, aber die Benutzererfahrung ist ... schlecht.

Animiertes scrollintoviewjQuery-Plugin zur Rettung

Animiertes `scrollintoview`jQuery-Plugin zur Rettung