20.JS判断一个元素进入可视区域

HTML结构及CSS样式 

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 100%;
            height: 1800px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .content{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="content"></div>
        <!-- <button class="btn">点我</button> -->
    </div>
</body>
<script src="./test.js">
    
</script>

</html>

怎么判断元素是不是进入了可视区域

方法1:

直接通过计算,先拿到浏览器滚动条滚动距离顶部滚动的距离scrollTop,这里我使用的是IE浏览器作为运行环境,没有考虑兼容性,靠document.body.scrollTop获取,document.body.clientHeight获取可视区域的高度,元素距离顶部的距离 + 元素的自身高度大于document.body.scrollTop时,元素在可视区域的顶部的下面,那么怎么判断是否在可视区域底部的上面呢,如果obj.target.offsetTop < scrollTop + clientHeight ,那么元素一定在可视区域底部的上面,若满足了这两个条件,则元素一定在可视区域内(未考虑窗口可左右滑动情况)。

//获取盒子元素
const content = document.querySelector('.content')
const obj = {
    //目标元素
    target: content,
    //是否可视
    isVisible: false
}

//监听盒子的可视属性,方便后续的逻辑处理
Object.defineProperty(obj, 'isVisible', {
    get() {
        return obj.isVisible
    }
    ,
    set(newValue) {
        if (newValue) {
            console.log('元素进入可视区');
        } else {
            console.log('元素离开可视区');
        }
    }
})

//监听事件
window.addEventListener('scroll', throttle(handler, 500))

function handler() {
    const scrollTop = document.body.scrollTop
    const clientHeight = document.body.clientHeight;
    obj.isVisible = obj.target.offsetTop < scrollTop + clientHeight && obj.target.offsetTop + obj.target.offsetHeight > scrollTop
}

//节流,滑动会频繁触发handler事件,搞个节流,提高性能
function throttle(fn, delay = 500) {
    let timer = null
    return function () {
        if (!timer) {
            timer = setTimeout(() => {
                fn()
                timer = null
            }, delay)
        }

    }
}

方法2

getBoundingClientRect()

函数返回值:

        1.height:元素的高度

        2.width:元素的宽度

        3.top:元素上边距离可视区域顶部的距离

        4.bottom:元素底边距离可视区域底部的距离

        5.left:元素左上角点距离可视区域左侧距离。

        6.right:元素右上角点距离可视区域右侧距离。

        7.x: 同left

        8.y:同right

//获取盒子元素
const content = document.querySelector('.content')
const obj = {
    //目标元素
    target: content,
    //是否可视
    isVisible: false
}

//监听盒子的可视属性,方便后续的逻辑处理
Object.defineProperty(obj, 'isVisible', {
    get() {
        return obj.isVisible
    }
    ,
    set(newValue) {
        if (newValue) {
            console.log('元素进入可视区');
        } else {
            console.log('元素离开可视区');
        }
    }
})

//监听事件
window.addEventListener('scroll', throttle(handler, 500))

function handler() {
    const {top , bottom} = obj.target.getBoundingClientRect()
    console.log(top , bottom);
    const clientHeight = document.body.clientHeight 
    obj.isVisible = top < clientHeight && bottom > 0
}

//节流,滑动会频繁触发handler事件,搞个节流,提高性能
function throttle(fn, delay = 500) {
    let timer = null
    return function () {
        if (!timer) {
            timer = setTimeout(() => {
                fn()
                timer = null
            }, delay)
        }

    }
}

  • 10
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值