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

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

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

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

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

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

//將頁面主體滾動5行

document.body. scrollByLines(5);

//確保當(dāng)前元素可見

document.forms[0].scrollIntoView();

//確保只在當(dāng)前元素不可見的情況下使其可見

document.Images[0].scrollIntoViewIfNeeded();

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

document.body. scrollByPages(-1);

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

本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對廣技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://www.gimmickmag.com/如轉(zhuǎn)載請注明出處!