JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 詳解
1. 總述
在JS 中scrollWidth、scrollHeight、scrollLeft 、scrollTop 屬性在做一些複雜的互動效果中是非常常用的，因此在本博文中詳細的介紹並給出例項。
以上的4個屬性是成對出現的，因此下面介紹中也成對的介紹，在例項中為了減少程式碼量，我直接用的id，實際開發中不推薦。
2. scrollWidth和scrollHeight
2.1 概念
- element.scrollWidth：返回元素的整體寬度，包括由於溢位而無法展示在網頁的不可見部分。
- element.scrollHeight ：返回元素的整體高度，包括由於溢位而無法展示在網頁的不可見部分。
2.2 例項
在頁面中，溢位說得更加通俗一些就是有沒有滾動條出現，出現了，說明子元素有一部分被父元素遮擋了，就溢位了，下面給出兩個例項，一個沒有溢位（沒有滾動條），一個溢位了，分別觀察他們的scrollWidth和scrollHeight。
2.2.1 未溢位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" 列印結果為： 100 120 也就是我給出的children的大小。
2.2.2 溢位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<style>
#parent_div{
width: 200px;
height: 180px;
background: skyblue;
overflow: auto;
}
#children_div{
width: 300px;
height: 320px;
background:green;
color: white;
}
</style>
</head>
<body>
<div id="parent_div">
<div id="children_div">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab praesentium consectetur, eligendi odit labore blanditiis repudiandae quam quia, atque eius ipsam suscipit quaerat in dicta. Soluta quasi quam eveniet ex.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus voluptate error fugiat dignissimos doloremque veritatis reiciendis illum hic repudiandae nobis a tempore quae accusamus, ab architecto suscipit assumenda dolorem explicabo.
</div>
</div>
<script>
console.log(children_div.scrollWidth, children_div.scrollHeight)
</script>
</body>
</html>
列印結果為： 300 320 仍然是我給出的children的大小。
3. scrollLeft 和scrollTop
3.1 概念
- element.scrollLeft ：返回元素左邊緣與檢視之間的距離，這裡的檢視指的是元素的內容（包括子元素以及內容）。
- element.scrollTop ：返回元素上邊緣與檢視之間的距離。
我們在頁面中經常會用到如圖所示的帶滾動條的框,我們的QQ訊息，微信訊息也是這樣的呀！
我們需要滑動滾動條來檢視完整的檢視，這個時候scrollLeft 和scrollTop就出現了，其實實際專案中我們是需要用到client和scroll這兩大屬性來自動的滑動滾動條，比如來新訊息的時候，滾動條自動往下滑動到底部以便檢視新訊息。這是著重講scroll，理解清楚了再進行下一步。
scrollLeft的概念是返回元素左邊緣與檢視之間的距離，我們一步一步的理解，首先，如上圖所示，當我們沒有滑動水平滾動條時，元素與它的內容預設是左上角頂點重合的，所以他們之間是沒有距離的，此刻的
scrollLeft 為 0。
當我們拉動水平滾動條時，元素與檢視就不再是左上角頂點重合了，水平之間是存在距離的（按左上角頂點重合計算),可以看到現在的scrollLef有了數值，因為沒有移動垂直滾動條，因此垂直方向仍然是沒有距離的。
當我將水平，垂直滾動條都拉到底部時，scrollLeft 和 scrollTop 都 分別為116.8 和156.8 ，我設定的元素寬高分別為：200 180 ，檢視（子元素）寬高分別為：300 320 ，如果正常計算的話最大距離應該為 ： 300-200= 100 以及 320-180 = 140，但結果都增加了16左右，那麼因為瀏覽器計算了滾動條的寬高，具體的程式碼我會在下面貼出，實際的程式碼會讓你更加清楚的理解這一過程，你可以直接複製然後再瀏覽器中嘗試。
3.2 例項
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<style>
#parent_div{
width: 200px;
height: 180px;
background: skyblue;
overflow: auto;
}
#children_div{
width: 300px;
height: 320px;
background:green;
color: white;
}
</style>
</head>
<body>
<div id="parent_div">
<div id="children_div">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab praesentium consectetur, eligendi odit labore blanditiis repudiandae quam quia, atque eius ipsam suscipit quaerat in dicta. Soluta quasi quam
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
</div>
</div>
<script>
parent_div.onscroll = function(){
console.log(parent_div.scrollLeft)
console.log(parent_div.scrollTop)
}
</script>
</body>
</html>
希望能夠幫助到大家，有什麼問題可以 直接評論即可，如果不夠詳細的話也可以說，我會及時回覆的。