區分瀏覽器視口的尺寸

可以先細看下面這張圖片的一些元素的位置，瀏覽器相對於整個電腦桌面的寬高的區分

一、clientWidth和clientHeigh 、 clientTop和clientLeft

相對於整個瀏覽器的頁面（除去最上面導航欄的位置）的clientWidth和clientHeigh 、 clientTop和clientLeft的位置的區分,求寬高加上padding，求上下的距離加上border的上下距離

1、clientWidth的實際寬度
clientWidth = width+左右padding

2、clientHeigh的實際高度
clientHeigh = height + 上下padding

3、clientTop的實際寬度
clientTop = boder.top(上邊框的寬度)

4、clientLeft的實際寬度
clientLeft = boder.left(左邊框的寬度)

二、offsetWidth和offsetHight 、 offsetTop和offsetLeft

1、offsetWidth的實際寬度
offsetWidth = width + 左右padding + 左右boder

2、offsetHeith的實際高度
offsetHeith = height + 上下padding + 上下boder

3、offsetTop實際寬度
offsetTop：當前元素 上邊框 外邊緣 到 最近的已定位父級（offsetParent） 上邊框 內邊緣的 距離。如果父級都沒有定位，則分別是到body 頂部 和左邊的距離

4、offsetLeft實際寬度
offsetLeft：當前元素 左邊框 外邊緣 到 最近的已定位父級（offsetParent） 左邊框 內邊緣的距離。如果父級都沒有定位，則分別是到body 頂部 和左邊的距離

三、scrollWidth和scrollHeight 、 scrollTop和scrollLeft

1、scrollWidth實際寬度
scrollWidth：獲取指定標籤內容層的真實寬度（可視區域寬度+被隱藏區域寬度）

2、scrollHeight的實際高度
scrollHeight：獲取指定標籤內容層的真實高度（可視區域高度+被隱藏區域高度）

3、scrollTop
scrollTop :內容層頂部 到 可視區域頂部的距離。

例項：var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

持續獲取高度的方式：
window.addEventListener(‘scroll’, ()=>{
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
});

4、scrollLeft
scrollLeft:內容層左端 到 可視區域左端的距離.