首頁  >  文章  >  web前端  >  scrollIntoView的使用實例

scrollIntoView的使用實例

零下一度
零下一度原創
2017-06-29 14:49:342193瀏覽

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn