scrollIntoView的使用實例

DOM的滾動

DOM規範中並沒有規定各瀏覽器需要實現怎樣的滾動頁面區域，各瀏覽器實現了相應的方法，可以使用不同的方式控制頁面區域的滾動。這些方法作為HTMLElement類型的擴充存在，所以它能在所有元素上使用。

1、scrollIntoView(alignWithTop)  捲動瀏覽器視窗或容器元素，以便在目前視窗的可見範圍看見目前元素。如果alignWithTop為true，或省略它，視窗會盡可能捲動到自身頂部與元素頂部平齊。 -------目前各瀏覽器均支援

2、scrollIntoViewIfNeeded(alignCenter) 只在目前元素在視窗的可見範圍內不可見的情況下，才捲動瀏覽器視窗或容器元素，最終讓當前元素可見。如果目前元素在視窗中可見，這個方法不做任何處理。如果將可選參數alignCenter設為true，則表示盡量將元素顯示在視窗中部（垂直方向）------Safari、Chrome實作了這個方法

3、scrollByLines(lineCount) 將元素的內容會滾動指定的行數的高度，lineCount的值可以是正值或是負值。 ---Safari、Chrome實作了這個方法

4、scrollByPages(pageCount) 將元素的內容捲動指定的頁面的高度，具體高度由元素的高度決定。 ---Safari、Chrome實作了這個方法

 

scrollIntoView()和scrollIntoVIewIfNeeded()作用的是元素的窗口，而scrollByLines()、scrollByPages()影響元素自身，下面是幾個範例：

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

 

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

 

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

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

以上是scrollIntoView的使用實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！