判断元素位于可见视角

document.getElementById('imgafter').offsetTop // 元素居页面顶部
980
document.documentElement.scrollHeight // 页面卷曲高度 + 可见视角高度 === 卷曲总长度
992
document.documentElement.scrollTop // 当前页面卷曲高度
55
document.documentElement.clientHeight // 可见视角高度
937

判断元素是否 在 可见视角

offsetTop <= document.documentElement.clientHeight + document.body.scrollTop <= document.documentElement.clientHeight + offsetTop

如上所示

元素位于可见视角

应用场景 ： 资源的懒加载
拓展

clientHeight 浏览器客户端可见视角高度
clientWidth 浏览器客户端可见视角宽度

scrollTop 网页卷曲 隐藏高度
scrollLeft 网页卷曲 隐藏宽度

offsetTop 元素离顶部的高度
offsetLeft 元素离顶部的宽度

offsetWidth 元素的宽度 offsetWidth = width + 左右padding + 左右bode
offsetHeight 和上一样

clientX 可见视角的x坐标
clientY 可见视角的y坐标

pageX 页面总高度的x坐标
pageY 页面总宽度的y坐标

scrollHeight 网页总高度
scrollWidth 网页总宽度

window.innerWidth 页面内容宽度
window.innerHeight 页面内容高度

判断可见视角 是 滚动条总高度 小于等于 窗口高度加元素偏移量高度
document.documentElement.scrollHeight <= document.documentElement.clientHeight + document.getElementById(‘imgafter’).offsetTop

export const scrollToBottom = {
    getScrollTop: function () {
        var scrollTop = 0,
            bodyScrollTop = 0,
            documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = bodyScrollTop - documentScrollTop > 0 ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    },
    getScrollHeight: function () {
        var scrollHeight = 0,
            bodyScrollHeight = 0,
            documentScrollHeight = 0;
        if (document.body) {
            bodyScrollHeight = document.body.scrollHeight;
        }
        if (document.documentElement) {
            documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = bodyScrollHeight - documentScrollHeight > 0 ? bodyScrollHeight : documentScrollHeight;
        return scrollHeight;
    },
    getClientHeight: function () {
        var windowHeight = 0;
        if (document.compatMode == 'CSS1Compat') {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    },
    onScrollEvent: function (callback) {
        var This = this;
        window.onscroll = function () {
            if (This.getScrollTop() + This.getClientHeight() >= This.getScrollHeight() - 10) {
                callback();
            }
        };
        window.ontouchstart = function () { // 移动端
            if (This.getScrollTop() + This.getClientHeight() >= This.getScrollHeight()) {
                callback(true);
            }
        };
    }
};