1. 程式人生 > >JS 視窗滾動條理解

JS 視窗滾動條理解

首先    window.innerHeight  表示瀏覽器可見或可用高度

如果body中的元素總高度超越上面的高度,預設body會出現滾動條 

那麼 document.body.scrollHeight  就表示 所有元素總高度     它當然大於 window.innerHeight

還有 document.body.scrollTop 就表示 當前頁面相對於總高度的位置,有的文件也說它是滾動條的位置。

上面的話還有點抽象,下面用資料表示

假設 window.innerHeight  視窗可見高度為 600px

document.body.scrollHeight  所有元素總高度為900px 

那麼 就會出現滾動條

document.body.scrollTop  的範圍 為 0 - 300

當滾動條位於 最頂端 未滑動時 document.body.scrollTop 的值為 0 

當滾動條位於 最底端時 document.body.scrollTop 的值為 300 

完美!