dom元素可视时间累计

最新推荐文章于 2023-02-21 15:33:17 发布

势无形

最新推荐文章于 2023-02-21 15:33:17 发布

阅读量188

点赞数 1

分类专栏：前端文章标签： js dom 可视曝光时间

本文链接：https://blog.csdn.net/qq_24861509/article/details/89223472

版权

前端专栏收录该内容

23 篇文章 2 订阅

订阅专栏

如果要统计一个dom元素在视口中停留的时间，可以尝试下面的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 100%;
            height: 300px;
            background: #577035;
            margin-bottom: 10px;
            text-align: center;
            color: #fff;
            line-height: 300px;
            font-size: 60px;
        }
    </style>
</head>
<body>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
<div class="box" time=0></div>
</body>
<script type="text/javascript">
    let t0 = 0;
    let t1 = 0;
    let t2 = 0;
    let timer = null; // 定时器
    let is_scroll = false; // 是否在滚动状态
    let speed = 150; // 低速滑动时，也可以视为非滑动状态
    let time_interval = 100; // 计时间隔（毫秒）

    document.onscroll = function () {
        t0 = document.documentElement.scrollTop || document.body.scrollTop;
        if (Math.abs(t0 - t1) > speed) {
            is_scroll = true;
            clearTimeout(timer);
            timer = setTimeout(isScrollEnd, 1000);
            t1 = document.documentElement.scrollTop || document.body.scrollTop;
        }
    };

    function isScrollEnd() {
        t2 = document.documentElement.scrollTop || document.body.scrollTop;
        if (t2 - t1 < speed) {
            is_scroll = false;
        }
    }

    let box = document.querySelectorAll('[time]');

    setInterval(function () {
        //滚动条高度+视窗高度 = 可见区域底部高度
        let visibleBottom = window.scrollY + document.documentElement.clientHeight;
        //可见区域顶部高度
        let visibleTop = window.scrollY;

        for (let i = 0; i < box.length; i++) {
            if (box[i].offsetTop > visibleTop && (box[i].offsetTop + box[i].offsetHeight) < visibleBottom) {
                if (!is_scroll) {
                    let b = box[i];
                    b.setAttribute("time", time_interval + parseInt(b.getAttribute('time')));
                    b.innerHTML = b.getAttribute('time')
                }
            }
        }
    }, time_interval)
</script>
</html>