js 判断进入可视区域

 

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）

 相关推荐：

　　 js 图片懒加载