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

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

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

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

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

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

//將頁(yè)面主體滾動(dòng)5行

document.body. scrollByLines(5);

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

document.forms[0].scrollIntoView();

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

document.Images[0].scrollIntoViewIfNeeded();

//將頁(yè)面主體往回滾動(dòng)1頁(yè)

document.body. scrollByPages(-1);

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

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