js 判断进入可视区域

CreateTime--2018年4月14日08:17:41

Author:Marydon

1.使用场景

　　图片懒加载时候需要用到，其他情况暂时没有遇到，欢迎留言补充！

2.代码实现

/** * 监听网页滚动事件 */$(window).scroll(function() {    // 获取的是浏览器可见区域高度（网页的可视区域的高度）（不滚动的情况下）    var documentClientHeight = document.documentElement.clientHeight || window.innerHeight    // 元素顶端到可见区域（网页）顶端的距离    var htmlElementClientTop = document.getElementById('#id').getBoundingClientRect().top;    // 网页指定元素进入可视区域    if (documentClientHeight >= htmlElementClientTop) {        // TODO 执行你要做的操作    }    });

拓展：

// 获取指定元素距离网页左上角(0,0)的纵向偏移距离// 该值会随着滚动条的变化而变化：scrollTop变大，该值变小；scrollTop变小，该值变大document.getElementById('#id').getBoundingClientRect().top;

value = 网页可视区域高度 - 元素距离网页顶部

1.当网页可视区域高度>=元素距离网页顶部时，说明该元素进入可视区域

2.计算可视距离：当value<0时，表示的是该元素差多少像素可以被看到（可视距离 = -value）

3.计算可视高度：当value>0时，表示的是该元素的可视高度（该元素可以被看到的高度）（可视距离 = value）

 相关推荐：