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