關于scrollIntoView()、scrollIntoViewIfNeeded()、scrolIByLines()、scroIIByPages()方法在實際工作中用得不多，但偶爾也會用到，注重用戶體驗時，一些細節要做到位，有些不常用的方法也就要用下，DOM規范沒有就如何滾動頁面區域這個問題作出規定。為此，各種瀏覽器都實現了相應的方法， 用于以不同方式控制滾動。這些方法都是作為HTMLElement類型的擴展存在的，因此可以在所有元素上使用。

◎scrollIntoView(alignWi thTop)：滾動瀏覽器窗◎或容器元素，以便在視◎(viewport)中看到當前元素。如果alignWi thTop的值為true，或者省略它，那么窗◎會盡可能滾動到自身頂部與元素頂部平齊。所有瀏覽器都實現了這個方法。

◎scrollIntoViewIfNeeded(alignCenter)：只在當前元素在視◎中不可見的情況下，才滾動瀏覽器窗◎或容器元素，最終讓當前元素可見。如果當前元素在視◎中可見，這個方法什么也不做。如果將可選的alignCenter參數設置為true，則表示盡量將元素顯示在視◎中部(垂 直方向)。Safari和Chrome實現了這個方法。

◎scrolIByLines( lineCount)：將元素的內容滾動指定的行數的高度，lineCount值可是正值，也可以是負值。Safari和Chrome實現了這個方法。

◎scroIIByPages (pageCount)：將元素的內容滾動指定的頁面的高度，具體高度由元素的高度決定。Safari和Chrome實現了這個方法。

要注意的是，scrollIntoView()和scrollIntoViewIfNeeded()作用的是元素的窗◎，而scrolIByLines()和scrolIByPages()影響的則是元素自身。下面是幾個示例：

//將頁面主體滾動5行

document.body. scrollByLines(5);

//確保當前元素可見

document.forms[0].scrollIntoView();

//確保只在當前元素不可見的情況下使其可見

document.Images[0].scrollIntoViewIfNeeded();

//將頁面主體往回滾動1頁

document.body. scrollByPages(-1);

〈b>南昌網站制作公司百恒網絡開發工程師提告訴大家由于所有瀏覽器都支持方法只有scrollIntoView()，因此這個方法是最常用的。

本文僅限內部技術人員學習交流,不得作于其他商業用途.希望此文對廣技人員有所幫助。原創文章出自:南昌網站建設公司-百恒網絡http://m.51yjwy.com/如轉載請注明出處!