React中使用scrollTo实现轮播组件滚动失效问题排查

我正在开发一个Carousel（轮播）组件，需要实现用户点击导航按钮时触发滚动效果。目前我的代码如下，但scrollTo功能无法正常工作：

import React, { FC, useRef, useEffect, useState } from "react";

const Carousel: FC = () => {
  const [activeSlide, setActiveSlide] = useState(0);
  const slides = Array.from({ length: 6 }, (_, index) => ({
    data: `Slide ${index + 1}`
  }));

  const containerRef = useRef<HTMLDivElement>(null);
  const slideRefs = useRef<HTMLDivElement[]>([]);

  const isLeftEnabled = activeSlide !== 0;
  const isRightEnabled = activeSlide !== slides.length - 1;

  useEffect(() => {
    if (containerRef.current) {
      containerRef.current.scrollTo(500, 0);
      console.log("scroll");
      console.log("containerRef.current", containerRef.current);
      //console all variables one by one
    }
  }, [activeSlide, slides]);

  return (
    <div className="flex flex-col items-center w-3/5">
      <div className="w-full overflow-x-scroll overflow-y-hidden carousel-container">
        <div className="flex gap-10 w-screen mb-8" ref={containerRef}>
          {slides.map((slide, index) => (
            <div
              className={`slide ${activeSlide === index ? "bg-purple-500" : "bg-green-400"} rounded-2xl h-52 w-40 flex place-items-center select-none`}
              key={`slide-${index}`}
            >
              <p className="m-auto">{slide.data}</p>
            </div>
          ))}
        </div>
      </div>
      <div className="flex gap-6">
        <button
          onClick={() => {
            isLeftEnabled && setActiveSlide(activeSlide - 1);
          }}
          className={`rounded-full w-20 h-20 ${isLeftEnabled ? "bg-green-600" : "bg-gray-300"}`}
        >
          &#9664;
        </button>
        <button
          onClick={() => {
            isRightEnabled && setActiveSlide(activeSlide + 1);
          }}
          className={`rounded-full w-20 h-20 ${isRightEnabled ? "bg-green-600" : "bg-gray-300"}`}
        >
          &#9654;
        </button>
      </div>
    </div>
  );
};

export default Carousel;

我已创建可复现该问题的在线环境。

核心问题 #

你把scrollTo调用在了错误的元素上：

• 当前containerRef指向的是内部flex容器（className="flex gap-10 w-screen mb-8"的div），但实际拥有滚动条的是它的父元素（带有overflow-x-scroll的div）。只有给拥有滚动条的元素调用scrollTo才能生效。

修复步骤 #

1. 修正ref指向 #

把containerRef绑定到带overflow-x-scroll的父元素上：

<div className="w-full overflow-x-scroll overflow-y-hidden carousel-container" ref={containerRef}>
  <div className="flex gap-10 w-screen mb-8">
    {/* ...轮播项 */}
  </div>
</div>

2. 滚动到目标幻灯片的位置 #

不要用固定值500，而是获取当前激活幻灯片的位置，滚动到对应坐标：

• 给每个幻灯片绑定ref，存储到slideRefs中
• 在useEffect里，获取激活幻灯片的offsetLeft，调用scrollTo滚动到该位置

修改后的完整代码：

import React, { FC, useRef, useEffect, useState } from "react";

const Carousel: FC = () => {
  const [activeSlide, setActiveSlide] = useState(0);
  const slides = Array.from({ length: 6 }, (_, index) => ({
    data: `Slide ${index + 1}`
  }));

  const containerRef = useRef<HTMLDivElement>(null);
  const slideRefs = useRef<HTMLDivElement[]>([]);

  const isLeftEnabled = activeSlide !== 0;
  const isRightEnabled = activeSlide !== slides.length - 1;

  useEffect(() => {
    const targetSlide = slideRefs.current[activeSlide];
    if (containerRef.current && targetSlide) {
      // 滚动到目标幻灯片的左侧位置，平滑滚动可选
      containerRef.current.scrollTo({
        left: targetSlide.offsetLeft,
        behavior: "smooth"
      });
    }
  }, [activeSlide]);

  return (
    <div className="flex flex-col items-center w-3/5">
      <div className="w-full overflow-x-scroll overflow-y-hidden carousel-container" ref={containerRef}>
        <div className="flex gap-10 w-screen mb-8">
          {slides.map((slide, index) => (
            <div
              className={`slide ${activeSlide === index ? "bg-purple-500" : "bg-green-400"} rounded-2xl h-52 w-40 flex place-items-center select-none`}
              key={`slide-${index}`}
              ref={el => slideRefs.current[index] = el!}
            >
              <p className="m-auto">{slide.data}</p>
            </div>
          ))}
        </div>
      </div>
      <div className="flex gap-6">
        <button
          onClick={() => {
            isLeftEnabled && setActiveSlide(activeSlide - 1);
          }}
          className={`rounded-full w-20 h-20 ${isLeftEnabled ? "bg-green-600" : "bg-gray-300"}`}
        >
          &#9664;
        </button>
        <button
          onClick={() => {
            isRightEnabled && setActiveSlide(activeSlide + 1);
          }}
          className={`rounded-full w-20 h-20 ${isRightEnabled ? "bg-green-600" : "bg-gray-300"}`}
        >
          &#9654;
        </button>
      </div>
    </div>
  );
};

export default Carousel;

3. 额外优化（可选） #

• 添加behavior: "smooth"实现平滑滚动效果
• 移除useEffect依赖中的slides，因为slides是组件内静态生成的，不会变化，避免不必要的重复执行

内容的提问来源于stack exchange，提问作者João Pedro