【vue】监听元素进入视口
代码:
<template> <div> <ul class="ulBox" id="ulBox"> <li class="li" :id="'id'+item" v-for="(item,index) in list" :key="index"> {{item}} </li> </ul> </div> </template> <script> export default { data() { return { list: [1,2,3,4,5,6,7,8,9], }; }, created() { }, mounted() { window.addEventListener('scroll', this.scrollToTop); }, methods: { scrollToTop() { // 获取视窗高度 var domHight = document.body.offsetHeight; // dom滚动位置 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; // 获取监听元素 var id; // 获取监听元素本身高度 var scrollHeight; // 获取监听元素距离视窗顶部距离 var offsetTop; // 获取监听元素距离顶部高度-窗口高度 var top; // 元素距离底部的高度+元素本身高度 var bottom; this.list.map( (i) => { id = document.getElementById(`id${i}`); scrollHeight = id.scrollHeight; offsetTop = id.offsetTop; top = offsetTop - domHight > 0 ? offsetTop - domHight : 0; bottom = scrollHeight + offsetTop; // 页面滚动位置 > 元素距离顶部高度-窗口高度 && 页面滚动位置 < 元素距离顶部高度+元素本身高度 if (scrollTop >= top && scrollTop <= bottom) { console.log('元素出现在可视区: ' + i); } else { console.log('元素不在了: ' + i); } }); }, }, } </script>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
2019-06-20 微信小程序生成小程序某一个页面的小程序码