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

叫我阿东就行

已于 2024-03-07 12:07:24 修改

阅读量514

点赞数 10

分类专栏：前端面试JS手写篇文章标签： javascript 前端 css

于 2024-03-06 21:14:36 首次发布

本文链接：https://blog.csdn.net/qq_74217055/article/details/136517874

版权

前端面试JS手写篇专栏收录该内容

22 篇文章 1 订阅

订阅专栏

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)
        }

    }
}