判断元素是否在可视范围内

最新推荐文章于 2025-02-10 23:57:04 发布

一棵喂猪的白菜

最新推荐文章于 2025-02-10 23:57:04 发布

阅读量683

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 源码

本文链接：https://blog.youkuaiyun.com/weixin_40308535/article/details/90288209

源码同时被 2 个专栏收录

7 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

博客主要围绕判断元素是否在可视范围内展开，虽未给出具体内容，但核心聚焦于该信息技术问题，在前端开发等场景有重要应用。

import Vue from 'vue'
let allEl = []
Vue.directive('adshow', {
    bind: (el, binding) => {
        setTimeout(() => {
            const elinfo = el.getBoundingClientRect()
            allEl.push({
                el: el,
                el_top: elinfo.top + (elinfo.height / 2) + window.scrollY - window.innerHeight,
                act: false
            })
        }, 10);
        el.style.color = 'red'
        // 滚动事件
        const innerHeight = window.innerHeight
        window.onscroll = function () {
            const scrollY = window.scrollY
            allEl.map((v, i) => {
                if (v.el_top < scrollY && v.el_top > scrollY - innerHeight) {
                    if (!v.act) {
                        v.setT = setTimeout(() => {
                            console.log(`show${i}`)
                        }, 3000);
                        v.act = true
                    }
                } else {
                    clearTimeout(v.setT)
                    v.act = false
                }
            })
        }
    },
    update: function (el, binding) { }
})