原文地址：https://www.jianshu.com/p/cd5ba22a416d
一、scroll團隊成員
scroll，滾動，一般討論的是網頁整體與瀏覽器之間的關系。
瀏覽器的的寬高是固定的，但是頁面的一般高度都遠遠大於瀏覽器的高度，有時候寬度也會大於瀏覽器的寬度。
Js中有一些系列的方法scroll的方法和屬性。
打開經典的W3c，看一下Dom Element對象關於scroll的屬性。
| 屬性/方法 | 解釋 |
|---|---|
| element.scrollHeight | 返回元素的整體高度。 |
| element.scrollWidth | 返回元素的整體寬度。 |
| element.scrollLeft | 返回元素左邊緣與視圖之間的距離。 |
| element.scrollTop | 返回元素上邊緣與視圖之間的距離。 |
這四個屬性，全部是只讀屬性。
其中，無非就是分為寬高和左上。
兩個方向。
image.png
准備工作
想要研究頁面滾動時，頁面和瀏覽器的之間的關系，那么首先，我們應該擁有一個頁面滾動的監聽方法。
偽代碼
監聽方法{ // scrollHeight // scrollTop } 方向是沒錯的，但是過程是曲折的。
最簡單的 監聽方法
window.onscroll = function() { 頁面滾動語句 }
但是，這樣是不行的，有兼容性問題。，在不同的瀏覽器下會有不同的監聽方法，所以我們應該先准備一個通用的方法，做好兼容工作。(萬惡的碎片化！！！)
具體的差異
- 谷歌瀏覽器 和沒有聲明 DTD ：
document.body.scrollTop; - 火狐 和其他瀏覽器
document.documentElement.scrollTop; - ie9+ 和 最新瀏覽器 都認識
window.pageXOffset; pageYOffset （scrollTop）
==兼容的封裝方法==
兼容不同瀏覽器，返回Json格式的寬和高
<script> // var json = {left: 10, right: 10} 變異 //json.left json.top function scroll() { if(window.pageYOffset != null) // ie9+ 和其他瀏覽器 { return { left: window.pageXOffset, top: window.pageYOffset } } else if(document.compatMode == "CSS1Compat") // 聲明的了 DTD // 檢測是不是怪異模式的瀏覽器 -- 就是沒有 聲明<!DOCTYPE html> { return { left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop } } return { // 剩下的肯定是怪異模式的 left: document.body.scrollLeft, top: document.body.scrollTop } } window.onscroll = function() { console.log(scroll().top); } </script> 二、scrollLeft 和 scrollTop
獲取scrollLeft 和 scrollTop。
根據封裝好的方法，我們在頁面上放置了一個 100*100 px的盒子。
進行一下滾動，基於可以在控制台看到很多即時打印的數據。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { height: 3000px; margin: 0px; padding: 0px; } #div0{ width: 100px; height: 100px; background: red; } </style> </head> <body> <div id="div0"></div> </body> </html> <script> // var json = {left: 10, right: 10} 變異 //json.left json.top function scroll() { if(window.pageYOffset != null) // ie9+ 和其他瀏覽器 { return { left: window.pageXOffset, top: window.pageYOffset } } else if(document.compatMode == "CSS1Compat") // 聲明的了 DTD // 檢測是不是怪異模式的瀏覽器 -- 就是沒有 聲明<!DOCTYPE html> { return { left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop } } return { // 剩下的肯定是怪異模式的 left: document.body.scrollLeft, top: document.body.scrollTop } } window.onscroll = function() { console.log("top： "+scroll().top); console.log("left： "+scroll().left); } </script> .
.
效果
image.png
.
.
小結圖
image.png
.
.
三、 scrollHeight 和 scrollWidth
scrollHeight和scrollWidth類似，我們以scrollHeight為例子。
- 使用scrollHeight和scrollWidth屬性返回元素的高度，單位為px,包括padding
- scrollHeight 和 scrollWidth返回的數值是包括當前不可見部分的。
- scrollHeight 和 scrollWidth 屬性為只讀屬性
栗子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #myD { margin-top: 10px; height: 200px; width: 250px; /*內容溢出設置*/ overflow: auto; } /*一個內容高度遠比容器高度的例子*/ #content { height: 500px; width: 1000px; padding: 10px; background-color: lightblue; } </style> </head> <body> <p>點擊以下按鈕，獲取id="content"的div元素的寬度和高度</p> <button onclick="myFc()">按鈕</button> <div id="myD"> <div id="content">內容</div> </div> <p id="demo"></p> <script> function myFc() { var elmnt = document.getElementById("content"); var y = elmnt.scrollHeight; var x = elmnt.scrollWidth; document.getElementById("demo").innerHTML = "高度: " + y + "px<br>寬度: " + x + "px"; } </script> </body> </html> .
.
結果：
image.png
小結圖
image.png
上面介紹的四個屬性，是從屬於元素的。
.
.
Element對象關於scroll的屬性 小結圖
image.png
.
.
window對象的scrollBy() 和scrollTo()
scrollBy()和scrollTo()方法是從屬於window對象的。
scrollBy(x,y)
scrollBy(x,y)方法滾動當前window中顯示的文檔，x和y指定滾動的相對量。
scrollBy(0, 200) ==> 使得滾動條Y軸的位置，在當前的基礎上增加200。比如：當前Y軸位置為0，執行后便是200；當前為100，執行后便是300。
- 要使此方法工作 window 滾動條的可見屬性必須設置為true！
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script> function scrollWindow(){ //x軸方向的的變化用得少 window.scrollBy(100,100); } </script> </head> <body> <input type="button" onclick="scrollWindow()" value="滾動條" /> <div style="width: 200px; height: 500px; background: darkcyan;font-size: 50px">001</div> <div style="width: 200px; height: 500px; background: orange;font-size: 50px">002</div> <div style="width: 200px; height: 500px; background: olivedrab;font-size: 50px">003</div> <div style="width: 200px; height: 500px; background: aqua;font-size: 50px">004</div> <div style="width: 200px; height: 500px; background: grey;font-size: 50px">005</div> </body> </html> .
.
效果
image.png
scrollTo(x,y)
語法
scrollTo(xpos,ypos)
- xpos 必需。要在窗口文檔顯示區左上角顯示的文檔的 x 坐標。
- ypos 必需。要在窗口文檔顯示區左上角顯示的文檔的 y 坐標。
作用
scrollTo(x,y)方法：滾動當前window中顯示的文檔，讓文檔中由坐標x和y指定的點位於顯示區域的左上角
scrollTo(0, 200) ==> 同scroll()方法,設置Y軸在200像素的位置。
示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> <script> function scrollWindow(){ //x軸方向的的變化用得少 window.scrollTo(0,1200); } </script> </head> <body> <input type="button" onclick="scrollWindow()" value="滾動條" /> <div style="width: 200px; height: 500px; background: darkcyan;font-size: 50px">001</div> <div style="width: 200px; height: 500px; background: orange;font-size: 50px">002</div> <div style="width: 200px; height: 500px; background: olivedrab;font-size: 50px">003</div> <div style="width: 200px; height: 500px; background: aqua;font-size: 50px">004</div> <div style="width: 200px; height: 500px; background: grey;font-size: 50px">005</div> </body> </html> .
.
效果：
本文作者：阿敏其人
鏈接：https://www.jianshu.com/p/cd5ba22a416d