如何让IntersectionObserver适配div ID的NodeList或数组

实现步骤 #

1. 先定义控制不透明度的CSS类

/* 按钮基础样式，默认完全透明 */
.trailingArrowsClass {
  opacity: 0;
  transition: opacity 0.2s ease; /* 加过渡动画体验更顺滑 */
}
/* 靠近视口顶部时的半透明状态 */
.trailingArrowsClass.is-visible-near-top {
  opacity: 0.5;
}
/* hover时完全不透明 */
.trailingArrowsClass.is-visible-near-top:hover {
  opacity: 1;
}

2. 单IntersectionObserver核心实现逻辑

// 第一步：直接获取所有带目标类名的按钮节点
const skipButtons = document.querySelectorAll('.trailingArrowsClass');

// 第二步：配置观察者参数，调整rootMargin可自定义「靠近顶部」的判定范围
const observerOptions = {
  root: null, // 以浏览器视口为根节点
  rootMargin: '-10% 0px -90% 0px', // 当前配置代表仅元素进入视口顶部10%区域时触发可见判定
  threshold: 0
};

// 第三步：创建全局唯一的观察者实例
const buttonObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 直接操作触发事件的目标元素的类名，无需额外映射关系
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible-near-top');
    } else {
      entry.target.classList.remove('is-visible-near-top');
    }
  });
}, observerOptions);

// 第四步：批量为所有按钮绑定观察逻辑
skipButtons.forEach(button => buttonObserver.observe(button));

手动ID数组适配方案

如果需要适配手动定义的按钮ID列表，只需修改第一步获取节点的逻辑即可，后续观察者逻辑完全不变：

// 手动维护的按钮ID数组
const buttonIdList = ['prev-chap-1', 'next-chap-1', 'prev-chap-2', 'next-chap-2'];
const skipButtons = buttonIdList.map(id => document.getElementById(id)).filter(Boolean);

参数调整说明 #

• 修改rootMargin的第一个百分比数值即可调整触发显示的区域范围，比如改为-5% 0px -95% 0px代表仅进入视口顶部5%区域才会显示按钮
• 后续新增章节按钮只需添加trailingArrowsClass类名即可自动适配逻辑，无需修改JS代码
• 仅生成一个观察者实例，无冗余内存占用，性能远优于单元素单实例的实现方式

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