js中scroll滾動相關

js中scroll滾動相關

scroll，滾動，一般討論的是網頁整體與瀏覽器之間的關系。

一.元素相關

屬性/方法	解釋
element.scrollHeight	返回元素的整體高度。
element.scrollWidth	返回元素的整體寬度。
element.scrollLeft	返回元素左邊緣與視圖之間的距離。
element.scrollTop	返回元素上邊緣與視圖之間的距離。

這四個屬性，全部是只讀屬性

其中，無非就是分為寬高和左上。
兩個方向。

1.scrollHeight 和 scrollWidth

• 使用scrollHeight和scrollWidth屬性返回元素的高度，單位為px,包括padding
• scrollHeight 和 scrollWidth返回的數值是包括當前不可見部分的。
• scrollHeight 和 scrollWidth 屬性為只讀屬性

2.scrollLeft 和 scrollTop

• 需要一個監聽方法
• 還存在瀏覽器兼容問題

二.窗口相關

1.window對象的scrollBy() 和scrollTo()

1.scrollBy(x,y)

scrollBy(x,y)方法滾動當前window中顯示的文檔，x和y指定滾動的相對量。

scrollBy(0, 200) ==> 使得滾動條Y軸的位置，在當前的基礎上增加200。比如：當前Y軸位置為0，執行后便是200；當前為100，執行后便是300。

• 要使此方法工作 window 滾動條的可見屬性必須設置為true！

2.scrollTo(x,y)

scrollTo(xpos,ypos)

• xpos 必需。要在窗口文檔顯示區左上角顯示的文檔的 x 坐標。
• ypos 必需。要在窗口文檔顯示區左上角顯示的文檔的 y 坐標。

scrollTo(x,y)方法：滾動當前window中顯示的文檔，讓文檔中由坐標x和y指定的點位於顯示區域的