如何让WeakSet正确存储溢出元素引用以兼容Chrome/FireFox？

问题分析 #

你遇到的跨浏览器行为差异，本质上并非Chrome/FireFox会创建元素的独立引用——IntersectionObserverEntry的target属性始终指向被监听的原DOM元素对象。出现has(el)返回false的情况，大概率是因为检查时传入的el与被监听的元素并非同一引用（比如元素被动态替换、克隆，或是获取了新的DOM节点引用），或是浏览器对WeakSet弱引用的回收时机差异。

低成本兼容方案 #

如果要确保全浏览器下的引用匹配，最直接的方式是直接在DOM元素上存储溢出状态，而非依赖WeakSet的引用判断。这种方式性能开销极低，且完全规避了引用匹配问题：

const options = {
  root: document.documentElement,
  rootMargin: '0px',
  threshold: 1,
}

const callback = (entries) => {
  entries.forEach((entry) => {
    const isOverflowed = entry.intersectionRatio !== 1;
    // 用自定义属性存储状态
    entry.target.dataset.isOverflowed = isOverflowed.toString();
  })
}

const observer = new IntersectionObserver(callback, options)

export const observeOverflow = (nodeList) => {
  nodeList.forEach((el) => {
    observer.observe(el)
  })
}

export const isOverflowed = (el) => el.dataset.isOverflowed === 'true'

若坚持使用WeakSet的兼容处理 #

如果你需要保留WeakSet的弱引用特性（避免内存泄漏），可以在监听时将元素存入一个WeakMap做映射验证，确保回调中使用的target与原元素引用一致：

const options = {
  root: document.documentElement,
  rootMargin: '0px',
  threshold: 1,
}

const overflowedElements = new WeakSet()
// 用WeakMap存储监听的元素（仅做引用验证）
const observedElements = new WeakMap()

const callback = (entries) => {
  entries.forEach((entry) => {
    const el = observedElements.get(entry.target) || entry.target;
    if (entry.intersectionRatio !== 1) {
      overflowedElements.add(el)
    } else {
      overflowedElements.delete(el)
    }
  })
}

const observer = new IntersectionObserver(callback, options)

export const observeOverflow = (nodeList) => {
  nodeList.forEach((el) => {
    observer.observe(el)
    observedElements.set(el, el)
  })
}

export const isOverflowed = (el) => overflowedElements.has(el)

关键说明 #

• 自定义属性方案无需依赖WeakSet，直接通过元素自身状态判断，兼容性最好，性能开销可忽略。
• WeakSet方案通过WeakMap提前存储原元素引用，确保回调中使用的是同一对象，避免浏览器特殊行为导致的引用偏差。

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