javascript 如何判断一个元素是否在可视区域中？
在日常开发中，我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值（例如 100 px），从而实现一些常用的功能，例如： 图片的懒加载 列表的无限滚动 计算广告元素的曝光情况 可点击链接的预加载 实现方式 判断一个元素是否在可视区域，我们常用的有三种办法： 1、offsetTop、scrollTop 2、getBoundingClientRect 3、Intersection Observer offsetTop、scrollTop offsetTop，元素的上外边框至包含元素的上内边框之间的像素距离，其他offset属性如下图所示： 下面再来了解下clientWidth、clientHeight： clientWidth：元素内容区宽度加上左右内边距宽度，即clientWidth = content + padding clientHeight：元素内容区高度加上上下内边距高度，即clientHeight = content + padding 这里可以看到client元素都不包括外边距 最后，关于scroll系列的属性如下： scrollWidth 和 scrollHeight 主要用于确定元素内容的实际大小 scrollLeft 和 scrollTop 属性既可以确定元素当前滚动的状态，也可以设置元素的滚动位置 垂直滚动 scrollTop > 0 水平滚动 scrollLeft > 0 将元素的 scrollLeft 和 scrollTop 设置为 0，可以重置元素的滚动位置
https://www.jianshu.com/p/d9f5f19e78da
