使用IntersectionObserver 實現：自動監聽元素是否進入了裝置的可視區域之內

风雨后见彩虹發表於2024-09-13
Server

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;

上面示例表示，當某個元素進入到可視範圍內，給當前元素新增一個類名，這個類名可以給當前元素新增一些動畫效果之類的。

相關文章