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