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指定的點位於顯示區域的