javascript判断div是否通过视口

最新推荐文章于 2024-03-06 21:14:36 发布

往地上就是一躺

最新推荐文章于 2024-03-06 21:14:36 发布

阅读量1.3k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/u014798510/article/details/80228222

版权

javascript 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

如图，图片或div随着滚动条的滚动进入视口在离开

要判断div是否通过视口，可以通过js getBoundingClientRect来获取div距离视口的top bottom left right

为了兼容IE getBoundingClientRect的两个像素之差：

function GetRect (element) {
    var rect = element.getBoundingClientRect();
    var top = !!document.documentElement.clientTop?document.documentElement.clientTop:0;
    var left= !!document.documentElement.clientLeft?document.documentElement.clientLeft:0;
    return{
        top    :   rect.top - top,
        bottom :   rect.bottom - top,
        left   :   rect.left - left,
        right  :   rect.right - left
    }
}

所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            background: #ccc;
            width: 500px;
            height: 400px;
            margin-top: 1000px;
            margin-left: auto;
            margin-right: auto;
        }
        .box1{
            width: 100px;
            height: 1000px;
            margin-top: 100px;
            background: #fff;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <div class="box1"></div>
    <script>
        (function(){
            function GetRect (element) {
                var rect = element.getBoundingClientRect();
                var top = !!document.documentElement.clientTop?document.documentElement.clientTop:0;
                var left= !!document.documentElement.clientLeft?document.documentElement.clientLeft:0;
                return{
                    top    :   rect.top - top,
                    bottom :   rect.bottom - top,
                    left   :   rect.left - left,
                    right  :   rect.right - left
                }
            }
            var $box = document.getElementById("box");
            var divH = $box.offsetHeight; //div高度
            var windowH = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight; //浏览器高度兼容写法
            window.onscroll = function(){
                var obj = GetRect($box);
                var check = obj.bottom-obj.top;
                if(obj.top >= windowH){ //在视口之下
                    console.log("视口之下")
                }
                if(obj.top < windowH && obj.bottom >= windowH){ //正在出现
                    console.log("正在出现")
                }
                if(obj.top > 0 && obj.top < windowH && obj.bottom > 0 && obj.bottom < windowH){ //正在视口中
                    console.log("正在视口中")
                }
                if(obj.top <= 0 && obj.bottom <= divH && obj.bottom >0){ //正在离开视口
                    console.log("正在离开视口")
                }
                if(obj.bottom <= 0){ //已经离开视口
                    console.log("已经离开视口")
                }
            };
        })()
    </script>
</body>
</html>

效果：

往地上就是一躺

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
javascript判断div是否通过视口

如图，图片或div随着滚动条的滚动进入视口在离开要判断div是否通过视口，可以通过js getBoundingClientRect来获取div距离视口的top bottom left right为了兼容IE getBoundingClientRect的两个像素之差：function GetRect (element) { var rect = element.getBoundingClie...
复制链接

扫一扫