JavaScrip 案例三 --元素是否在可视化区域

目录

用途

实现方式

创建观察者

传入被观察者

应用场景

---

用途

---

可视区域：浏览网页的设备肉眼可见的区域

1. 图片懒加载
2. 列表的无限循环滚动
3. 计算广告元素的曝光情况
4. 可点击链接的预加载

实现方式

---

1. offsetTop 元素的上边框至包含元素的上内边框之间的像素距离
2. clientWidth 元素内容区宽度加上左右内边距宽度（clientWidth = content + padding）
3. clientHeight 元素内容区高度加上上下内边距高度（clientHeight = content + padding）
4. scrollTop+scrollLeft 属性既可以确定元素当前滚动的状态，也可以设置元素的滚动位置

   1. 垂直滚动 scrollTop > 0
   2. 水平滚动 scrollLeft > 0
   3. 将元素的 scrollLeft 和 scrollTop 设置为 0，可以重置元素的滚动位置

5. scrollWidth+scrollHeight 主要用于确定元素内容的实际大小
6. getBoundingClientRect
   1. 返回值是一个 DOMRect对象，拥有left, top, right, bottom, x, y, width, 和 height属性

      const target = document.querySelector('.target');
      const clientRect = target.getBoundingClientRect();
      console.log(clientRect);
      
      // {
      //   bottom: 556.21875,
      //   height: 393.59375,
      //   left: 333,
      //   right: 1017,
      //   top: 162.625,
      //   width: 684
      // }
      

       
      1. 如果一个元素在视窗之内的话，那么它一定满足下面四个条件

         1. top 大于等于 0​​​​​​​
         2. left 大于等于 0
         3. bottom 小于等于视窗高度
         4. right 小于等于视窗宽度

            function isInViewPort(element) {
              const viewWidth = window.innerWidth 
                    || document.documentElement.clientWidth;
              const viewHeight = window.innerHeight 
                    || document.documentElement.clientHeight;
              const {
                top,
                right,
                bottom,
                left,
              } = element.getBoundingClientRect();
            
              return (
                top >= 0 &&
                left >= 0 &&
                right <= viewWidth &&
                bottom <= viewHeight
              );
            }
            

   2. 当页面发生滚动的时候，top与left属性值都会随之改变
7. Intersection Observer

Intersection Observer 即重叠观察者，从这个命名就可以看出它用于判断两个元素是否重叠，因为不用进行事件的监听，性能方面相比getBoundingClientRect会好很多

创建观察者

---

​​​​​​​

const options = {
  // 表示重叠面积占被观察者的比例，从 0 - 1 取值，
  // 1 表示完全被包含
  threshold: 1.0, 
  root:document.querySelector('#scrollArea') // 必须是目标元素的父级元素
};

const callback = (entries, observer) => { ....}

const observer = new IntersectionObserver(callback, options);

通过new IntersectionObserver创建了观察者 observer，传入的参数 callback 在重叠比例超过 threshold 时会被执行

callback回调函数常用属性

// 上段代码中被省略的 callback
const callback = function(entries, observer) { 
    entries.forEach(entry => {
        entry.time;               // 触发的时间
        entry.rootBounds;         // 根元素的位置矩形，这种情况下为视窗位置
        entry.boundingClientRect; // 被观察者的位置举行
        entry.intersectionRect;   // 重叠区域的位置矩形
        entry.intersectionRatio;  
        // 重叠区域占被观察者面积的比例（被观察者不是矩形时也按照矩形计算）
        entry.target;             // 被观察者
    });
};

传入被观察者

---

通过 observer.observe(target) 这一行代码即可简单的注册被观察者

const target = document.querySelector('.target');
observer.observe(target);

应用场景

创建了一个十万个节点的长列表，当节点滚入到视窗中时，背景就会从红色变为黄色