Anwendungsbeispiele für scrollIntoView

Scrollen von DOM

Die DOM-Spezifikation legt nicht fest, welche Art von scrollendem Seitenbereich jeder Browser implementieren muss. Jeder Browser hat entsprechende Methoden implementiert und kann unterschiedliche Methoden verwenden, um das Scrollen des Seitenbereichs zu steuern. Diese Methoden liegen als Erweiterungen des HTMLElement-Typs vor und können daher für alle Elemente verwendet werden.

1. scrollIntoView(alignWithTop) Scrollen Sie durch das Browserfenster oder Containerelement, sodass das aktuelle Element im sichtbaren Bereich des aktuellen Fensters sichtbar ist. Wenn alignWithTop wahr ist oder weggelassen wird, wird das Fenster so weit wie möglich gescrollt, bis die Oberkante des Fensters so bündig mit der Oberkante des Elements ist. ------- Derzeit unterstützen alle Browser

2. scrollIntoViewIfNeeded(alignCenter) scrollt nur dann durch das Browserfenster oder Containerelement, wenn das aktuelle Element nicht im sichtbaren Bereich des Fensters sichtbar ist aktuelles Element sichtbar. Wenn das aktuelle Element im Ansichtsfenster sichtbar ist, führt diese Methode keine Aktion aus. Wenn der optionale Parameter alignCenter auf true gesetzt ist, bedeutet dies, dass das Element so weit wie möglich in der Mitte des Fensters (vertikale Richtung) angezeigt wird ------ Safari und Chrome implementieren diese Methode

3. scrollByLines(lineCount) Der Inhalt wird um die angegebene Anzahl von Zeilen gescrollt. Der Wert von lineCount kann positiv oder negativ sein. ---Safari und Chrome implementieren diese Methode

4. scrollByPages(pageCount) scrollt den Inhalt des Elements auf die angegebene Seitenhöhe. Die spezifische Höhe wird durch die Höhe des Elements bestimmt. ---Safari und Chrome implementieren diese Methode

scrollIntoView() und scrollIntoVIewIfNeeded() wirken sich auf das Fenster des Elements aus, während scrollByLines() und scrollByPages() das Element selbst beeinflussen Das Folgende ist A ein paar Beispiele:

//将页面主体滚动5行
document.body.scrollByLines(5);

/确保当前元素可见
document.getElementById(“test”).scrollIntoView();   //
//true:对象的顶端与当前窗口的顶部对齐
//false:对象的底端与当前窗口的顶部对齐

//确保只在当前元素不可见的情况下才使其可见
document.getElementById(“test”).scrollIntoViewIfNeeded();

//将页面主体往回滚1页
doument.body.scrollByPages(-1);
由于只有scrollIntoView被各浏览器均支持，所以这个方法最为常用

Das obige ist der detaillierte Inhalt vonAnwendungsbeispiele für scrollIntoView. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!