vue判断内容是否滑动到底部的三种方式

君不问高堂明镜 · 发表于 2024-4-12 14:54:32

方式一：直接给滚动的部分加个 @scroll="handleScroll" 然后js里面进行业务处理

<div class="tip-info" @scroll="handleScroll">
<div class="tip-blank" :key="outerIndex" v-for="(item, outerIndex) in htmlCaption">
</div>

复制代码

methods: {
// 滚动事件
handleScroll(event) {
const dialog = event.target;
if (dialog.scrollHeight - dialog.scrollTop === dialog.clientHeight) {
// 当内容滑动到底部时，执行想要的操作
}
}
}

复制代码

方式二：可以采用给滚动内容，在最后一个内容的div后面追加一个新的元素，然后IntersectionObserver 进行观察

<div class="tip-info">
<div class="tip-blank" :key="outerIndex" v-for="(item, outerIndex) in htmlCaption">
</div>

复制代码

mounted() {
this.addNewElementToTipBlank();
},
methods: {
addNewElementToTipBlank() {
// 创建新元素
const newElement = document.createElement('div');
newElement.className = 'tip-box';
newElement.textContent = 'New Tip Box Added';
// 找到 tip-blank 类所在的 div 元素
const tipBlankDivs = document.querySelectorAll('.tip-blank');
const lastTipBlankDiv = tipBlankDivs[tipBlankDivs.length - 1]; // 获取最后一个 tip-blank 元素
// 在最后一个 tip-blank 元素后面插入新的 div 元素
if (lastTipBlankDiv) {
lastTipBlankDiv.insertAdjacentElement('afterend', newElement);
}
// 创建一个观察者实例
const observer = new IntersectionObserver((entries) => {
console.log(entries);
entries.forEach((entry) => {
// entry.isIntersecting 判断目标元素是否在视口中
if (entry.isIntersecting) {
console.log('目标元素在视口中!');
}
else {
console.log('目标元素不在视口中.');
}
});
});
// 开始观察某个元素
const targetElement = document.querySelector('.tip-box');
if (targetElement) {
observer.observe(targetElement);
}
// 停止观察
// 如果你不再需要观察某个元素，你可以调用：
observer.unobserve(targetElement);
// 如果你想停止观察所有元素，你可以调用：
observer.disconnect();
},
}

复制代码

IntersectionObserver具体的用法：
IntersectionObserver 是一个现代的浏览器 API，允许开发者在某个元素与其祖先元素或顶层文档视口发生交叉时得到通知。它非常适合实现图片懒加载、无限滚动、广告曝光率等功能。
1. 浏览器的兼容性
IntersectionObserver目前在大多数现代浏览器中都得到了支持。但是在一些老版本的浏览器，如 IE 中，则没有支持。点击查看 IntersectionObserver 的兼容性
2. 如何使用？

const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
// entry.isIntersecting 判断目标元素是否在视口中
if (entry.isIntersecting) {
console.log('目标元素在视口中!');
} else {
console.log('目标元素不在视口中.');
}
});
});
// 开始观察某个元素
const targetElement = document.querySelector('.some-class');
observer.observe(targetElement);
// 停止观察
// 如果你不再需要观察某个元素，你可以调用：
observer.unobserve(targetElement);
// 如果你想停止观察所有元素，你可以调用：
observer.disconnect();
// 配置选项
当创建 IntersectionObserver 实例时，你可以提供一个配置对象，该对象有以下属性：
const options = {
root: document.querySelector('.scroll-container'), // 观察目标的父元素，如果不设置，默认为浏览器视口
rootMargin: '10px', // 增加或减少观察目标的可见区域大小
threshold: [0, 0.25, 0.5, 0.75, 1] // 当观察目标的可见比例达到这些阈值时会触发回调函数
};
const observer = new IntersectionObserver(callback, options);

复制代码

3. 一些常见的应用场景

// 图片懒加载
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.lazy;
observer.unobserve(img);
}
});
});
document.querySelectorAll('img[data-lazy]').forEach(img => {
observer.observe(img);
});
// 无线滚动加载
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadMoreContent(); // 你的加载更多内容的函数
observer.unobserve(entry.target); // 如果你只想加载一次，你可以在这里停止观察
}
});
});
const loadMoreTrigger = document.querySelector('.load-more-trigger');
observer.observe(loadMoreTrigger);

复制代码

方式三如果前2种方式不可行，可试试这一种

<template>
<div class="tip-info" @scroll.passive="handleScroll">
<div class="sn-f-c-c tip-blank" :key="i" v-for="(item, i) in caption">
{{item}}
</div>
</div>
</template>
<script>
data() {
return {
caption: []
};
},
methods: {
// 接口返回数据
interface() {
this.caption = ''; // 接口返回数据
if (this.caption.length > 0) {
this.$nextTick(() => {
this.handleScroll({
target: document.querySelector('.tip-info')
});
});
}
},
handleScroll(e) {
const { scrollTop, clientHeight, scrollHeight } = e.target;
// 条件判断(scrollHeight - (scrollTop + clientHeight)) / clientHeight <= 0.05
// 是在计算滚动条距离底部的距离与可视区域高度的比例。如果这个比例小于或等于5%（0.05），则认为滚动条已经非常接近底部。
if ((scrollHeight - (scrollTop + clientHeight)) / clientHeight <= 0.05) {
console.log('内容到底了');
}
}
}
</script>

复制代码

以上就是vue判断内容是否滑动到底部的三种方式的详细内容，更多关于vue判断内容是否滑动到底部的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/javascript/319049sh2.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！