电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 如何判断元素是否进入可视区域viewport？ [打印本页]

作者: look_w 时间: 2019-3-15 17:44 标题: 如何判断元素是否进入可视区域viewport？

个性签名: 生如夏花，逝如冬雪；人生如此，何悔何怨。

前言: 经常需要计算元素的大小或者所在页面的位置,offsetWidth，clientWidth，scrollWidth,scrollTop这几个关键字的出现更是家常便饭，每次碰到都需要事先实验一番。为了下次开发提高效率。在这里一次性做个总结，以用来判断元素是否在可视区域以及用原生js简单实现懒加载。文末有个简单的懒加载实现的demo，有需要的可以看一下。

目录

工欲善其事，必先利其器。在判断元素是否在可视区域实现简单的原生懒加载前，我们先简单回顾下以下几个关键的概念。

ps：如果你对这些概念已经比较熟悉了，可以直接跳到第五点查看关键代码示例。
1. 偏移量

偏移量(offset dimension),元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小(注意，不包括外边距)。通过下列4个属性可以取得元素的偏移量。
偏移量    概念    公式
offsetHeight    元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、(可见的) 水平滚动条的高度、上边框高度和下边框高度。    offsetHeght = content + padding + border + scrollX
offsetWidth    元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度。    offsetWidth = content + padding + border + scrollY
offsetLeft    元素的左外边框至**包含元素的左内边框之间的像素距离。
offsetTop    元素的上外边框至包含元素的上内边框之间的像素距离。

其中，offsetLeft 和 offsetTop 属性与包含元素有关，包含元素的引用保存在 offsetParent 属性中。offsetParent 属性不一定与 parentNode 的值相等。

如下图显示

注意: 所有这些偏移量属性都是只读的，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性;如果需要重复使用其中某些属性的值，可以将它们保存在局部变量中，以提高性能。

这也是上篇文章文字跑马灯项目中(戳此跳转),为什么增加padding后,textWidth需要重新获取的原因

小结

偏移量: 只读属性；包括滚动条和边框，不包括外边距。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)