Funktioniert scrollIntoView in allen Browsern?

82

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

javascript jquery js-scrollintoview 9-Bit
quelle

Antworten:

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 scrollintoviewjQuery-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
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:

  1. Cache die aktuelle Bildlaufposition des Containers als START POSITION
  2. Führen Sie die in scrollIntoView integrierte Version aus
  3. Zwischenspeichern Sie die Bildlaufposition erneut als ENDPOSITION
  4. Stellen Sie den Behälter wieder auf START POSITION
  5. 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