【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>