当前位置：首页 > news >正文

使用IntersectionObserver实现页面右侧运营位区域固定，和页面列表数据分页加载

news 2025/8/17 9:08:49

1.效果如下：

页面向上滚动时，右侧运营位区域固定在可视区域内
在这里插入图片描述

2.实现思路

一般这种分页数据的列表，数据量都比较大，那么就不能将列表父级元素作为根元素参照，而是应该在列表元素底部设置一个元素（假设为触底元素（touchBottomEle），高度可设置小点：10px），只要这个元素出现在视口内（即：threshold值为1），那么就应该加载数据了

3.代码如下

onMounted(() => {initEventListener()
})const options = {threshold: 1, // 阈值列表判断
}function initEventListener(params: type) {const observer = new IntersectionObserver((entries) => {console.log(entries);const [entry] = entriesconst ratio = Math.ceil((entry.intersectionRatio) * 100)if (ratio >= 10) {console.log('>=10');}if (ratio <= 0) {console.log('<=0');}}, options);observer.observe(touchBottomEle.value)// 监听触底元素
}