vuejs如何判断元素是否在可视区域（三种方法）

vuejs如何判断元素是否在可视区域，下面web建站小编给大家详细介绍三种实现这个功能的方法。

方法一：offsetTop、scrollTop

//利用以下公式
el.offsetTop - document.documentElement.scrollTop <= viewPortHeight

方法二：getBoundingClientRect

const target = document.querySelector('.target');
const clientRect = target.getBoundingClientRect();
console.log(clientRect);

方法三：Intersection Observer

const options = {
  // 表示重叠面积占被观察者的比例，从 0 - 1 取值，
  // 1 表示完全被包含
  threshold: 1.0, 
  root:document.querySelector('#scrollArea') // 必须是目标元素的父级元素
};
 
const callback = function(entries, observer) { 
  entries.forEach(entry => {
    entry.time;               // 触发的时间
    entry.rootBounds;         // 根元素的位置矩形，这种情况下为视窗位置
    entry.boundingClientRect; // 被观察者的位置举行
    entry.intersectionRect;   // 重叠区域的位置矩形
    entry.intersectionRatio;  // 重叠区域占被观察者面积的比例（被观察者不是矩形时也按照矩形计算）
    entry.target;             // 被观察者
  });
}
const observer = new IntersectionObserver(callback, options);

javascript如何获取滚动距离/获取页面中鼠标位置

jquery如何实现返回头部

js如何实现置顶功能（附代码）

标签： getBoundingClientRect, offsetTop, scrollTop, 可视区域

上面是“vuejs如何判断元素是否在可视区域（三种方法）”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2854.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！