判断元素出现在用户视野

基础知识

1. 屏幕可视窗口宽高

**js原生**
document.documentElement.clientWidth // 不包含滚动条宽度
document.documentElement.clientHeight 

window.innerWidth // 宽度包含滚动条宽度
window.innerHeight

var win_h = window.innerHeight || document.documentElement.clientHeight //兼容写法

**jQuery**
$(window).width() 
$(window).height()

屏幕可视窗口宽高

2. 整个网页宽高

**js原生**
document.documentElement.scrollWidth
document.documentElement.scrollHeight 

**jQuery**
$(document).width()
$(document).height()

整个网页宽高

3. 整个个网页的上方或者左边被卷起来的部分

**js原生**
 document.documentElement.scrollTop
 document.documentElement.scrollLeft

**jQuery**
$(document).scrollTop()
$(document).scrollLeft()

整个个网页的上方或者左边被卷起来的部分

4. 元素的尺寸和位置

**js原生**
elem.offsetWidth //包含了左右padding+border;
elem.offsetHeight //包含了上下padding+border;
// 下面的两个和box-sizing 属性有关，当设为border-box时，返回的宽高包含padding和border，默认时，则不包含。
window.getComputedStyle(elem).width // 返回字符串包含单位px
window.getComputedStyle(elem).height // 返回字符串包含单位px

elem.offsetTop //  相对于第一个已定位的父元素的顶部偏移距离
elem.offsetLeft  // 相对于第一个已定位的父元素的左边偏移距离

**jQuery**
$node.offset().top // 距离文档顶部的距离
$node.offset().left  // 距离文档左边的距离

获取当前页面滚动条纵坐标的位置

var heightTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYoffset;

获取当前页面滚动条纵坐标的位置

**jQuery**
$node.offset().top;

**js原生**
function getPoint(obj) { //获取某元素以浏览器左上角为原点的坐标  
    var t = obj.offsetTop; //获取该元素对应父容器的上边距  
    var l = obj.offsetLeft; //对应父容器的上边距  
    //判断是否有父容器，如果存在则累加其边距  
    while (obj = obj.offsetParent) {
        t += obj.offsetTop; //叠加父容器的上边距  
        l += obj.offsetLeft; //叠加父容器的左边距  
    }  
    return {
        x:l,
        y:t
    }
}  

var top2 = getPoint(document.getElementsByClassName('btn')[0]);
console.log(top2.y); //2080

监听某个元素是否已经在可视区域

实现思路：获取当前监听元素距离文档的左上角的top距离；根据这个距离和当前可视区域的高度+文档滚动距离进行比较，即scrollTop <= top <= document.documentElement.clientHeight + scrollTop

**jQuery**
$(function(){
    var top = $("#btn").offset().top; //距离文档顶部的距离
    var windowHeight = document.documentElement.clientHeight; //可视区域的高度
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        if(top >= scrollTop && top <= windowHeight + scrollTop){
            console.log('在可视区域了');
        }
    });
})

**js原生**

function getPoint(obj) { //获取某元素以浏览器左上角为原点的坐标  
    var t = obj.offsetTop; //获取该元素对应父容器的上边距  
    var l = obj.offsetLeft; //对应父容器的上边距  
    //判断是否有父容器，如果存在则累加其边距  
    while (obj = obj.offsetParent) {
        t += obj.offsetTop; //叠加父容器的上边距  
        l += obj.offsetLeft; //叠加父容器的左边距  
    }  
    return {
        x:l,
        y:t
    }
}

window.onload = function(){
    var top = getPoint(document.getElementById('btn')).y; //距离文档顶部的距离
    var windowHeight = document.documentElement.clientHeight; //可视区域的高度
    window.onscroll = function(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(top >= scrollTop && top <= windowHeight + scrollTop){
            console.log('在可视区域了');
        }    
    }
}