DOM元素Window關於寬高、screen、scroll相關屬性

1、前言

瞭解或者熟悉 window 對象的關於寬高、screen、scroll相關屬性，咱們在進行自定義控件或者進行繪製的實現時候，是比較重要的參考參數。有些參數名字相近或者類似，比較難區分。所以，很是有必要來梳理一下。

2、DOM 之 Window

寬高，scroll，screen 相關的屬性以下。

2.1 寬高

寬高的屬性 innerWidth、innerHeight: 窗口的寬高，能夠理解爲實際的畫布寬高，包括可滾動的寬高以及滾動條所佔的寬高。

outerWidth、outerHeight: 一般指頁面所在瀏覽器的寬高。

下圖說明了它們的區別。

2.2 scroll

scroll 用來表示window 的滑動位置。通俗點講，這個是依據屏幕座標系，也就是左上角爲原點 O(0,0) 來講的。因此滑動位置說簡單點就是內容滑出瀏覽器內容區的長度。

scrollX: 就是內容向左滑出的長度。pageXOffset 是它的別名，值同樣的。 scrollY: 就是內容向上滑出的長度。pageYOffset 是它的別名，值同樣的。

2.3 screen

screen 裏面就是封裝了瀏覽器所在屏幕的規格，而 window 裏面也有一些相關屬性：

screenX、screenY: 瀏覽器左上角在屏幕座標系上的坐值。screenLeft 和 screenTop 是它的別名，固然也更說明了它的含義。