有趣且重要的JS知识合集（20）screen/client/scroll/offset等坐标属性知识点

1、线上链接地址

浏览器坐标属性

2、screen系列 

2.1、screenX：

鼠标位置相对于用户屏幕水平偏移量

2.2、screenY：

鼠标位置相对于用户屏幕垂直偏移量

3、client系列

3.1、clientX:

鼠标位置相对于文档的左边距（不随页面滚动而改变）

3.2、clientY:

鼠标位置相对于文档的上边距（不随页面滚动而改变）

3.3、clientHeight:

表示元素节点的 CSS 高度（单位像素），只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 高度，则返回实际高度

clientHeight = height + padding

3.4、clientWidth：

表示元素节点的 CSS 宽度（单位像素），只对块级元素有效，对于行内元素返回0。也是只包括元素本身的宽度和padding，如果有垂直滚动条，还要减去垂直滚动条的宽度

clientWidth = width + padding

3.5、clientLeft:

元素节点左边框（left border）的宽度（单位像素），不包括左侧的padding和margin。如果没有设置左边框，或者是行内元素（display: inline），该属性返回0

3.6、clientTop:

元素节点顶部边框的宽度（单位像素），不包括顶部的padding和margin。如果没有设置上边框，或者是行内元素（display: inline），该属性返回0

4、scroll系列

4.1、scrollWidth:

获取元素整个内容的宽度 （包含看不见的） ，如果有滚动条（滚动条会占用部分宽高），不计算滚动条的宽高

4.2、scrollHeight:

获取元素整个内容的高度 （包含看不见的） ，如果有滚动条（滚动条会占用部分宽高），不计算滚动条的宽高

4.3、scrollTop(可读写):

表示当前元素的垂直滚动条向下侧滚动的像素数量

4.4、crollLeft(可读写):

表示当前元素的滚动水平滚动条向右的像素数量

判断滚动条垂直是否滚动到底 垂直滚动条 scrollHeight -scrollTop = clientHeight

判断滚动条水平是否滚动到底 水平滚动条 scrollWidth -scrollLeft = clientWidth

5、offset系列

5.1、offsetX:

鼠标位置相对被触发dom的左上角的水平距离，以内容区左上角为基准点（不包括边框），如果触发点在边框上会返回负值

5.2、offsetY:

鼠标位置相对被触发dom的左上角的垂直距离，以内容区左上角为基准点（不包括边框），如果触发点在边框上会返回负值

5.3、offsetHeight:

表示元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border，以及水平滚动条的高度（如果存在滚动条）, 如果元素的 CSS 设为不可见（比如display: none;），则返回0

offsetHeight = height + border + padding

5.4、offsetWidth:

表示元素的 CSS 水平宽度（单位像素），包括元素本身的宽度、padding 和 border，以及垂直滚动条的宽度（如果存在滚动条）, 如果元素的 CSS 设为不可见（比如display: none;），则返回0

offsetWidth = width + border + padding

5.5、offsetParent:

返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素

5.6、offsetLeft:

当前元素和定位父元素之间的偏移量（如果没有设置定位父元素，就是相对于左上角的位置,left是最左边的距离）

5.7、offsetTop:

当前元素和定位父元素之间的偏移量（如果没有设置定位父元素，就是相对于左上角的位置,top是距离顶部的距离）

6、其他

注意：当浏览器body出现滚动条时，pageY和clientY才不一致！

6.1、pageX:

鼠标位置相对于文档的左边距（随页面滚动而改变）

e.pageX = e.clientX + e.target.scrollLeft;

6.2、pageY:

鼠标位置相对于文档的上边距（随页面滚动而改变）

e.pageY = e.clientY + e.target.scrollTop;

6.3、layerX:

有定位属性的父元素的左上角的水平距离（自身有定位属性的话就是相对于自身），都没有的话，就是相对于body的左上角（包含边框）

6.4、layerY:

有定位属性的父元素的左上角的垂直距离（自身有定位属性的话就是相对于自身），都没有的话，就是相对于body的左上角（包含边框）

6.5、getBoundingClientRect:

用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗(可视范围)的位置

getBoundingClientRect方法的所有属性，都把边框（border属性）算作元素的一部分

• x：元素左上角相对于视口的横坐标
• y：元素左上角相对于视口的纵坐标
• height：元素高度
• width：元素宽度
• left：元素左上角相对于视口的横坐标，与x属性相等
• right：元素右边界相对于左边视口的横坐标（等于x + width）
• top：元素顶部相对于视口的纵坐标，与y属性相等
• bottom：元素底部相对于上边视口的纵坐标（等于y + height）