使用IntersectionObserver 实现:自动监听元素是否进入了设备的可视区域之内
文章目录
IntersectionObserver (自动监听元素是否进入了设备的可视区域之内)
示例:
const io = new IntersectionObserver(callback, option);
// 获取元素
const target = document.getElementById("dom");
// 开始观察
io.observe(target);
// 停止观察
io.unobserve(target);
// 关闭观察器
io.disconnect();
vue示例:
const className = 'enterpage';
const directives = {
viewport: {
inserted: function (el, binding, vnode) {
// 设置观察器选项
const options = {
root: null, // 使用视窗作为根
rootMargin: '0px', // 根边界盒与目标边界盒之间的边距
threshold: 0.4 // 交叉比例(即目标元素的可见区域占比)
};
// 创建一个新的 Intersection Observer 实例
const observer = new IntersectionObserver((entries, observer) => {
// 遍历所有观察目标的条目
entries.forEach((entry) => {
// 如果目标元素的交叉比例大于 0(即部分可见)
if (entry.isIntersecting) {
console.log('可见了');
// 添加 class
el.classList.add(className);
}
});
}, options);
// 使用观察器观察目标元素
observer.observe(el);
// 组件销毁时停止观察
vnode.context.$once('hook:beforeDestroy', function () {
observer.unobserve(el);
});
},
unbind(el) {
// 移除 class
el.classList.remove(className);
}
}
};
export default directives;
上面示例表示,当某个元素进入到可视范围内,给当前元素添加一个类名,这个类名可以给当前元素添加一些动画效果之类的。
+
(^_^)打赏作者喝个咖啡(^_^)


我要收藏
返回顶部
跳到底部
分类:
JS
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
2021-09-13 JavaScript之Blob对象基本用法及分片上传示例
2017-09-13 JS之document.cookie详解以及$.cookie的使用
2017-09-13 CSS3 calc实现滚动条出现页面不跳动
2015-09-13 CSS属性disabled和readonly的区别是什么
2015-09-13 CSS之Normalize.css的使用(重置表)
2015-09-13 CSS reset重置样式有那么重要吗?