如何为React中的div添加自定义Prev和Next滚动按钮

直接给你修改好的可运行代码，核心是用useRef拿到滚动容器的DOM节点，调用原生滚动API实现控制：

import { useRef } from 'react';

export default function App() {
  const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
  // 获取横向滚动容器的DOM引用
  const scrollContainerRef = useRef(null);
  // 每次滚动的距离，可根据内容宽度调整
  const scrollStep = 200;

  // 向左滚动
  const handlePrevClick = () => {
    scrollContainerRef.current?.scrollBy({
      left: -scrollStep,
      behavior: 'smooth' // 平滑滚动，去掉则为瞬间滚动
    });
  };

  // 向右滚动
  const handleNextClick = () => {
    scrollContainerRef.current?.scrollBy({
      left: scrollStep,
      behavior: 'smooth'
    });
  };

  return (
    <div>
      <div
        style={{
          display: "flex",
          justifyContent: "flex-end",
          gap: "50px",
          marginBottom: "30px"
        }}
      >
        <div style={{ cursor: "pointer" }} onClick={handlePrevClick}>Prev</div>
        <div style={{ cursor: "pointer" }} onClick={handleNextClick}>Next</div>
      </div>
      <div
        ref={scrollContainerRef}
        style={{
          display: "flex",
          gap: "150px",
          overflowX: "scroll", // 明确启用水平滚动
          backgroundColor: "aqua",
          // 可选：隐藏原生滚动条（按需启用）
          scrollbarWidth: 'none',
          msOverflowStyle: 'none'
        }}
      >
        {data.map((item, index) => (
          // 加key避免React列表渲染警告
          <div key={index}>item {item}</div>
        ))}
      </div>
    </div>
  );
}

关键细节说明： #

• useRef的作用：通过它绑定滚动容器，就能直接操作DOM元素的滚动属性，这是React中操作原生DOM的标准方式。
• scrollBy方法：原生DOM元素的滚动API，left参数控制方向和距离（负数左滚，正数右滚），behavior: 'smooth'提供平滑滚动的体验，不需要的话可以替换成auto实现瞬间滚动。
• overflowX: "scroll"：比overflow: scroll更精准，仅启用水平方向的滚动，避免不必要的垂直滚动条。
• 动态滚动距离优化：如果需要每次滚动刚好一个条目宽度，可以在组件挂载后获取第一个条目的宽度，动态设置scrollStep：

  import { useRef, useEffect, useState } from 'react';
  
  export default function App() {
    const [scrollStep, setScrollStep] = useState(200);
    const scrollContainerRef = useRef(null);
    const data = [1,2,3,4,5,6,7,8,9,0];
  
    useEffect(() => {
      if (scrollContainerRef.current) {
        const firstItem = scrollContainerRef.current.querySelector('div');
        if (firstItem) {
          // 条目宽度加上gap的距离
          setScrollStep(firstItem.offsetWidth + 150);
        }
      }
    }, []);
  
    // 其余代码不变
  }
  

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