React中flex-row元素溢出时滚动按钮的实现问题

核心问题分析 #

你之前的问题大概率是错误地把ref存入了状态，或是useEffect的依赖项配置不当。useRef的.current属性更新不会触发组件重渲染，也不会触发依赖项包含ref的useEffect，正确做法是直接用useRef引用DOM元素，再在useEffect中绑定监听事件。

完整实现步骤 #

1. 创建滚动容器的ref：用useRef获取flex布局的容器DOM元素，不要将ref存入state。
2. 监听滚动与尺寸变化：组件挂载时，给容器添加scroll事件监听，给window添加resize事件监听；组件卸载时移除这些监听，避免内存泄漏。
3. 计算滚动状态：通过容器的scrollLeft、clientWidth、scrollWidth三个属性判断按钮显示逻辑：
   • 左侧按钮显示：scrollLeft > 0（存在左侧未显示内容）
   • 右侧按钮显示：scrollLeft + clientWidth < scrollWidth（存在右侧未显示内容）
4. 实现滚动逻辑：点击按钮时，调用scrollBy方法控制容器滚动，支持平滑滚动效果。

代码示例 #

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

const ScrollableFlexRow = () => {
  const containerRef = useRef(null);
  const [showLeftBtn, setShowLeftBtn] = useState(false);
  const [showRightBtn, setShowRightBtn] = useState(false);

  // 检查滚动状态，更新按钮显示
  const checkScrollState = () => {
    const container = containerRef.current;
    if (!container) return;
    
    const hasLeftContent = container.scrollLeft > 0;
    const hasRightContent = container.scrollLeft + container.clientWidth < container.scrollWidth;
    
    setShowLeftBtn(hasLeftContent);
    setShowRightBtn(hasRightContent);
  };

  // 向左滚动
  const scrollLeft = () => {
    containerRef.current.scrollBy({ left: -200, behavior: 'smooth' });
  };

  // 向右滚动
  const scrollRight = () => {
    containerRef.current.scrollBy({ left: 200, behavior: 'smooth' });
  };

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

    // 初始化时检查一次滚动状态
    checkScrollState();

    // 添加监听事件
    container.addEventListener('scroll', checkScrollState);
    window.addEventListener('resize', checkScrollState);

    // 组件卸载时移除监听
    return () => {
      container.removeEventListener('scroll', checkScrollState);
      window.removeEventListener('resize', checkScrollState);
    };
  }, []); // 空依赖，仅在组件挂载/卸载时执行

  return (
    <div style={{ position: 'relative', width: '100%', overflow: 'hidden' }}>
      {/* 左侧滚动按钮 */}
      {showLeftBtn && (
        <button 
          onClick={scrollLeft}
          style={{
            position: 'absolute',
            left: 10,
            top: '50%',
            transform: 'translateY(-50%)',
            zIndex: 10,
            padding: '8px 12px',
            cursor: 'pointer',
            border: 'none',
            borderRadius: '4px',
            backgroundColor: 'rgba(0,0,0,0.5)',
            color: '#fff'
          }}
        >
          ←
        </button>
      )}

      {/* Flex滚动容器 */}
      <div
        ref={containerRef}
        style={{
          display: 'flex',
          gap: '16px',
          padding: '12px',
          overflowX: 'auto',
          scrollbarWidth: 'none', // 隐藏原生滚动条（可选）
          msOverflowStyle: 'none'
        }}
      >
        {/* 示例内容 */}
        {Array.from({ length: 20 }).map((_, idx) => (
          <div
            key={idx}
            style={{
              width: '200px',
              height: '150px',
              backgroundColor: '#eee',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              borderRadius: '8px'
            }}
          >
            Item {idx + 1}
          </div>
        ))}
      </div>

      {/* 右侧滚动按钮 */}
      {showRightBtn && (
        <button 
          onClick={scrollRight}
          style={{
            position: 'absolute',
            right: 10,
            top: '50%',
            transform: 'translateY(-50%)',
            zIndex: 10,
            padding: '8px 12px',
            cursor: 'pointer',
            border: 'none',
            borderRadius: '4px',
            backgroundColor: 'rgba(0,0,0,0.5)',
            color: '#fff'
          }}
        >
          →
        </button>
      )}
    </div>
  );
};

export default ScrollableFlexRow;

关键细节说明 #

• ref的正确使用：useRef的.current属性仅用于存储DOM引用，无需存入state，否则会导致不必要的重渲染或监听失效。
• 监听事件清理：必须在useEffect的返回函数中移除监听，防止组件卸载后残留事件监听造成内存泄漏。
• 自定义滚动体验：隐藏原生滚动条可以让界面更简洁，平滑滚动参数behavior: 'smooth'可根据需求替换为auto实现瞬间滚动。

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