多交叉观察器钩子控多元素：横向滚动实现遇Ref与Hook难题

核心思路 #

无需给每个元素单独套监听组件，直接用原生IntersectionObserver监听滚动容器内的首尾元素，结合容器滚动事件控制按钮显隐与滚动行为，既规避多refs的繁琐操作，也减少组件嵌套冗余。

实现步骤 #

1. 基础结构搭建 #

先写出滚动容器与左右控制按钮的基础JSX结构：

import { useRef, useEffect, useState } from 'react';

const HorizontalScroll = ({ items }) => {
  const scrollContainerRef = useRef(null);
  // 控制左右按钮的显隐状态
  const [showLeftBtn, setShowLeftBtn] = useState(false);
  const [showRightBtn, setShowRightBtn] = useState(true);

  return (
    <div className="scroll-wrapper">
      <button 
        className="scroll-btn left" 
        onClick={() => scrollContainerRef.current?.scrollBy({ left: -300, behavior: 'smooth' })}
        style={{ display: showLeftBtn ? 'block' : 'none' }}
      >
        ←
      </button>
      <div ref={scrollContainerRef} className="scroll-container">
        {items.map((item, index) => (
          <div key={index} className="scroll-item">
            {item.content}
          </div>
        ))}
      </div>
      <button 
        className="scroll-btn right" 
        onClick={() => scrollContainerRef.current?.scrollBy({ left: 300, behavior: 'smooth' })}
        style={{ display: showRightBtn ? 'block' : 'none' }}
      >
        →
      </button>
    </div>
  );
};

2. 用原生IntersectionObserver监听元素可见性 #

在useEffect中初始化观察者，仅监听容器内的首尾元素，以此控制按钮显隐：

useEffect(() => {
  const container = scrollContainerRef.current;
  if (!container) return;

  const items = container.querySelectorAll('.scroll-item');
  if (items.length === 0) return;

  const firstItem = items[0];
  const lastItem = items[items.length - 1];

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach(entry => {
        if (entry.target === firstItem) {
          setShowLeftBtn(!entry.isIntersecting);
        }
        if (entry.target === lastItem) {
          setShowRightBtn(!entry.isIntersecting);
        }
      });
    },
    { root: container, threshold: 0.1 }
  );

  observer.observe(firstItem);
  observer.observe(lastItem);

  return () => {
    observer.unobserve(firstItem);
    observer.unobserve(lastItem);
  };
}, [items]);

3. 添加上必要的CSS #

确保容器横向滚动、按钮定位正确：

.scroll-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.scroll-container {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 8px 0;
  /* 隐藏滚动条（可选） */
  scrollbar-width: none;
}

.scroll-container::-webkit-scrollbar {
  display: none;
}

.scroll-item {
  flex: 0 0 auto;
  width: 200px;
  height: 300px;
  background: #f0f0f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
}

.scroll-btn.left {
  left: 8px;
}

.scroll-btn.right {
  right: 8px;
}

方案优势 #

• 仅监听首尾两个元素，性能更优，逻辑简洁
• 无需依赖第三方库，用原生API实现，减少项目体积
• 避免给每个元素嵌套监听组件，消除冗余结构
• 按钮显隐完全由元素可见性驱动，贴合Netflix式交互逻辑

内容的提问来源于stack exchange，提问作者Matías Benavente