如何在JavaScript中为observeElement传递自定义函数替换内置回调

完全可以实现你的需求，只需要调整observeElement的参数定义，将自定义回调函数作为参数传入，再在交集检测的回调逻辑中调用这些传入的函数即可。以下是修改后的完整代码：

核心函数修改 #

function observeElement(element, onObserved = () => {}, onNotObserved = () => {}) {
  let target = document.querySelectorAll(element);
  let observer;

  createObserver();

  function createObserver() {
    let options = {
      root: null,
      rootMargin: '0px',
      threshold: 1.0
    }
    observer = new IntersectionObserver(handleIntersect, options);
    target.forEach(k => observer.observe(k));
  }

  function handleIntersect(entries, observer) {
    entries.forEach(entry => {
      // 直接使用当前交集检测的元素，无需重复查询DOM
      if (entry.intersectionRatio === 1) {
        onObserved();
      } else {
        onNotObserved();
      }
    });
  }
}

关键改动说明 #

• 给observeElement新增两个参数：onObserved（元素完全可见时触发的回调）和onNotObserved（元素未完全可见时触发的回调），并设置空函数作为默认值，避免无参数调用时报错。
• 移除了原函数内部固定的isObserved和isNotObserved函数，改为直接调用传入的自定义回调。
• 优化了handleIntersect中的DOM操作：无需重复查询所有目标元素，entry.target就是当前触发交集检测的元素，直接判断即可。

示例调用 #

window.addEventListener("load", (event) => {
  // 导航菜单的自定义回调
  const navOnShow = () => {
    console.log('导航菜单已完全显示');
    // 这里可以添加你的自定义逻辑，比如修改菜单样式、触发动画等
  };
  const navOnHide = () => {
    console.log('导航菜单已隐藏');
  };

  // 快捷菜单的自定义回调
  const quickOnShow = () => {
    console.log('快捷菜单已完全显示');
  };
  const quickOnHide = () => {
    console.log('快捷菜单已隐藏');
  };

  observeElement('.menu-nav-area', navOnShow, navOnHide);
  observeElement('.menu-quick-area', quickOnShow, quickOnHide);
}, false);

这样就能实现不同元素绑定不同的交集触发逻辑，完全满足你的需求。

内容的提问来源于stack exchange，提问作者soulmv