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被各瀏覽器均支持,所以這個方法最為常用


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM