Element.scrollIntoView()

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.

Die Methode Element.scrollIntoView() scrolled das Element in den sichtbaren Bereich des Browsers.

Syntax

element.scrollIntoView(); // Gleich mit element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean Argument
element.scrollIntoView(scrollIntoViewOptions); // Object Argument

Parameter

alignToTop
Dies ist ein Boolean Wert:
  • Bei true wird der obere Rand des Elements an den oberen Rand des sichtbaren Bereichs im Browser gescrolled.
  • Bei false wird der untere Rand des Elements an den unteren Rand des sichtbaren Bereichs im Browser gescrolled.
scrollIntoViewOptions
Ein Boolean oder Objekt mit den folgenden Optionen:
{
    behavior: "auto"  | "smooth",
    block:    "start" | "end",
}
Wenn der Wert ein Boolean, enspricht true {block: "start"} und false {block: "end"}.

Beispiel

var element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({block: "end", behavior: "smooth"});

Notizen

Das Element wird eventuell nicht ganz nach oben oder unten gescrolled. Je nach Layout der anderen Elemente.

Technische Daten

Specification Status Kommentar
CSS Object Model (CSSOM) View Module
Die Definition von 'Element.scrollIntoView()' in dieser Spezifikation.
Arbeitsentwurf Initial definition

Browserkompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
scrollIntoView
Experimentell
Chrome Vollständige Unterstützung 29Edge Vollständige Unterstützung 17
Hinweise
Vollständige Unterstützung 17
Hinweise
Hinweise The only parameter supported is alignToTop.
Keine Unterstützung 12 — 17
Hinweise
Hinweise This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Hinweise No support for smooth behavior.
Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 8
Hinweise
Vollständige Unterstützung 8
Hinweise
Hinweise This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Hinweise No support for smooth behavior or center options.
Opera Vollständige Unterstützung 38Safari Vollständige Unterstützung 6
Hinweise
Vollständige Unterstützung 6
Hinweise
Hinweise No support for smooth behavior or center options.
WebView Android Vollständige Unterstützung ≤37Chrome Android Vollständige Unterstützung 29Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 41Safari iOS Vollständige Unterstützung 5
Hinweise
Vollständige Unterstützung 5
Hinweise
Hinweise No support for smooth behavior or center options.
Samsung Internet Android Vollständige Unterstützung 2.0
scrollIntoViewOptions
Experimentell
Chrome Vollständige Unterstützung 61
Hinweise
Vollständige Unterstützung 61
Hinweise
Hinweise The block and inline options support the values start, center, end, nearest.
Edge Vollständige Unterstützung 79
Hinweise
Vollständige Unterstützung 79
Hinweise
Hinweise The block and inline options support the values start, center, end, nearest.
Firefox Vollständige Unterstützung 36
Hinweise
Vollständige Unterstützung 36
Hinweise
Hinweise No support for inline option.
Hinweise Before Firefox 58, nearest and center values for the block option was unsupported. See bug 1389274.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 48
Hinweise
Vollständige Unterstützung 48
Hinweise
Hinweise The block and inline options support the values start, center, end, nearest.
Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 61
Hinweise
Vollständige Unterstützung 61
Hinweise
Hinweise The block and inline options support the values start, center, end, nearest.
Chrome Android Vollständige Unterstützung 61
Hinweise
Vollständige Unterstützung 61
Hinweise
Hinweise The block and inline options support the values start, center, end, nearest.
Firefox Android Vollständige Unterstützung 36
Hinweise
Vollständige Unterstützung 36
Hinweise
Hinweise No support for inline option.
Hinweise Before Firefox 58, nearest and center values for the block option was unsupported. See bug 1389274.
Opera Android Vollständige Unterstützung 45
Hinweise
Vollständige Unterstützung 45
Hinweise
Hinweise The block and inline options support the values start, center, end, nearest.
Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung 8.0
Hinweise
Vollständige Unterstützung 8.0
Hinweise
Hinweise The block and inline options support the values start, center, end, nearest.

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch