JavaScript 如何判断页面元素是否在可见区域内？

🏷️ JavaScript

var top = obj.getBoundingClientRect().top //元素顶端到可见区域顶端的距离
var se = document.documentElement.clientHeight //浏览器可见区域高度。
if(top <= se ) {
    //code
}

---

var top = obj.getBoundingClientRect().top //元素顶端到可见区域顶端的距离
var se = document.documentElement.clientHeight //浏览器可见区域高度。
if(top <= se ) {
    //code
}

$(document).ready(function () {
    $(window).scroll(function () {
        var a = document.getElementById("eq").offsetTop;
        if (a >= $(window).scrollTop() &amp;&amp; a < ($(window).scrollTop()+$(window).height())) {
            alert("div 在可视范围");
        }
    });
});

// 网页可见区域宽：document.body.clientWidth
// 网页可见区域高：document.body.clientHeight
// 网页可见区域宽：document.body.offsetWidth (包括边线的宽)
// 网页可见区域高：document.body.offsetHeight (包括边线的高)
// 网页正文全文宽：document.body.scrollWidth
// 网页正文全文高：document.body.scrollHeight
// 网页被卷去的高：document.body.scrollTop
// 网页被卷去的左：document.body.scrollLeft
// 网页正文部分上：window.screenTop
// 网页正文部分左：window.screenLeft
// 屏幕分辨率的高：window.screen.height
// 屏幕分辨率的宽：window.screen.width
// 屏幕可用工作区高度：window.screen.availHeight
// 屏幕可用工作区宽度：window.screen.availWidth
//
// 因为一直记不住这些所以转过来常看看就应该能记住了
//
// 有了这个我就可以来动态加载图片代码了
document.onmousewheel = function () {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var hght = document.body.scrollHeight;
    if (scrollTop + document.documentElement.clientHeight >= hght) {
        /*在这里写加载图片的代码*/
    }
}

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

// 网页可见区域宽：document.body.clientWidth
// 网页可见区域高：document.body.clientHeight
// 网页可见区域宽：document.body.offsetWidth (包括边线的宽)
// 网页可见区域高：document.body.offsetHeight (包括边线的高)
// 网页正文全文宽：document.body.scrollWidth
// 网页正文全文高：document.body.scrollHeight
// 网页被卷去的高：document.body.scrollTop
// 网页被卷去的左：document.body.scrollLeft
// 网页正文部分上：window.screenTop
// 网页正文部分左：window.screenLeft
// 屏幕分辨率的高：window.screen.height
// 屏幕分辨率的宽：window.screen.width
// 屏幕可用工作区高度：window.screen.availHeight
// 屏幕可用工作区宽度：window.screen.availWidth

// 部分 jQuery 函数
$(window).height() 　//浏览器时下窗口可视区域高度
$(document).height()　　　　//浏览器时下窗口文档的高度
$(document.body).height()　　　　　　//浏览器时下窗口文档 body 的高度
$(document.body).outerHeight(true)　//浏览器时下窗口文档 body 的总高度 包括 border padding margin
$(window).width() 　//浏览器时下窗口可视区域宽度
$(document).width()//浏览器时下窗口文档对于象宽度
$(document.body).width()　　　　　　//浏览器时下窗口文档 body 的高度
$(document.body).outerWidth(true)　//浏览器时下窗口文档 body 的总宽度 包括 border padding

// HTML 精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
// scrollHeight: 获取对象的滚动高度。
// scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
// scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
// scrollWidth:获取对象的滚动宽度
// offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
// offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
// offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
// event.clientX 相对文档的水平座标
// event.clientY 相对文档的垂直座标
// event.offsetX 相对容器的水平坐标
// event.offsetY 相对容器的垂直坐标
// document.documentElement.scrollTop 垂直方向滚动的值
// event.clientX+document.documentElement.scrollTop 相对文档的水平座标 + 垂直方向滚动的量

---

之前在代码里使用了 $(document).scroll() 方法, 发现在 IE8 下面滚动时不会触发该事件;
改成 $(window).scroll() 就可以正确触发了.

---