🎉 前言

对于前端中的距离问题分为两个部分，一个是针对element的距离，另一个是关于事件点击的距离的获得。一下我们将从这个两个方面进行讲解。

🎉 针对于element

这一部分主要分为三种一个是关于可视区域的client，第二个是关于offset，最后一个是关于如果包含了滚动条的scroll。对于这三个的理解可以是这样的client是指能看大的区域不管如何的滚动等行为，client就是指当前看到的区域。offset是相对于父元素的距离，不管是看见的父元素还是由于滑动看不到的父元素。scroll是指当存在了滚动条后，滚动条的宽度以及滚动的距离。

🎇client

指的就是可视区域的位置，并且如果有滚动条要将滚动条的高度减掉。

element.clientWidth：获取对象可见内容的宽度（width + padding）
element.clientHeight：获取对象可见内容的高度（height + padding）
element.clientLeft:：获取对象的左边框的宽度
element.clientTop：获取对象的上边框的宽度

🎇offset

指的是相对于父元素的位置。

element.offsetParent：当前对象的最近的定位父级元素
element.offsetWidth：当前对象的宽度（width+padding+border）
element.offsetHeight：当前对象的高度（Height+padding+border）
element.offsetLeft：当前对象到其 offsetParent 左边的距离
element.offsetTop：当前对象到其 offsetParent 上边的距离

🎇scroll

指的是具有滚动条的可滚动的长度和滚动的距离。

element.scrollWidth:获取对象的滚动宽度 
element.scrollHeight: 获取对象的滚动高度
element.scrollLeft：就是元素有滚条的情况下，左滚的距离(width+padding一体)
element.scrollTop：这个就是元素中内容上滚的距离(height+padding一体)

🎉 针对于点击事件的

和elementy一样也是分为了几种不同的情况，主要也是针对可见区域，屏幕等情况的。

🎇clientX,clientY

鼠标相对于浏览器窗口可视区域的 X，Y 坐标（窗口坐标），表示页面可视区域的 X，Y 偏移量，可视区域不包含工具栏和滚动条，搜索栏等。并且与页面滚动无关，滚动后的 clientY 值不变。

🎇pageX,pageY

类似于 clientX，clientY，但它们使用的是文档坐标而非窗口坐标。页面坐标 Y，与 clientY 基本类似，唯一区别在于该值与页面滚动有关，具体来说,pageY = clientY + 页面滚动高度。

🎇offsetX,offsetY

鼠标相对于事件源元素（srcElement）的 X，Y 坐标。

🎇screenX,screenY

screen 顾名思义是屏幕，是用来获取鼠标点击位置到屏幕显示器的距离，距离的最大值需根据屏幕分辨率的尺寸来计算。

🎉 针对window的距离

window浏览器的版本经过几次迭代之后，使得距离的一些API接口比较混论现在进行一些整理。先上图。不同版本的迭代的API： window.innerHeight（IE9） || document.documentElement.clientHeight（IE8） || document.body.clientHeight(IE6) window.pageYOffset （IE9）|| document.documentElement.scrollTop（IE8） || document.body.scrollTop(IE6)

🎉 总结

希望对你有用，如果想找实例可以去看看我的图片懒加载的文章： juejin.cn/post/713488…

面试--Html中的距离问题总结