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();

//確定隻在目前元素不可見的情況下才使其可見

document.getElementById(“test”).scrollIntoViewIfNeeded();

//将頁面主體往復原1頁

doument.body.scrollByPages(-1);

由于隻有scrollIntoView被各浏覽器均支援，是以這個方法最為常用。

/***************************/

以上内容摘自《JavaScript進階程式設計(第2版)》

/*************************/

以前看QQ郵箱有一個效果，研究一番後找到使用scrollIntoView做到的，示例再放一個。

</script>

</body>

</html>

xmlns="http://www.w3.org/1999/xhtml">

ScrollIntoView

<a>可以點選我試試!</a>

<b></b>

附件

(1 個)

<b>普通附件</b>

(已認證卡巴斯基殺毒引擎掃描)

<a></a>

ecomstore.tar (1.46M)

<a>儲存到我的随身盤</a>

使用scrollIntoView:true