如何通过按钮点击管理React MUI图片轮播组件的滚动位置？

问题背景 #

我需要实现一个带自定义切换按钮的图片轮播，将父元素设为可视窗口并开启滚动，但遇到两个核心问题：

• 点击事件的滚动状态管理困难
• 尝试用refs和useLayoutEffect获取父窗口与列表组件宽度时，React/MUI不会渲染超出屏幕右侧的列表部分，导致列表宽度等于父窗口宽度，无法计算精准位移。

原始精简代码 #

const CarouselDisplay = ({ prev, next, ...props }) => {
  // translate state
  const [scroll, setScroll] = useState(0);

 
  // Handle click events
  const prevHandler = () => {
    
  };

  const nextHandler = () => {
  
  };



  return (
    <StyledRoot scroll={scroll}>
      <CarouselButton prev={prev} onClick={prevHandler} />
      <CarouselButton next={next} onClick={nextHandler} />
      {/* <CarouselList translate={shift} /> */}
      <CarouselList />
    </StyledRoot>
  );
};

const StyledRoot = styled(Box)({
  position: 'relative',
  marginBottom: '.5rem',
  background: 'transparent',

  overflow: 'hidden',
  overflowX: 'scroll',
  scrollbarWidth: 'thin',
});

export default CarouselDisplay;

解决步骤与代码调整 #

1. 确保列表完整渲染（突破父容器宽度限制） #

父容器的overflow: hidden会限制子元素的渲染范围，需调整样式让列表能完整展开：

const StyledRoot = styled(Box)({
  position: 'relative',
  marginBottom: '.5rem',
  background: 'transparent',
  overflowX: 'scroll',
  scrollbarWidth: 'thin',
  overflowY: 'hidden', // 只隐藏Y轴滚动，不限制X轴子元素宽度
});

// 给CarouselList添加样式，强制它不被父容器压缩
const CarouselList = styled(Box)({
  display: 'inline-flex',
  gap: '1rem', // 图片间的间距，按需调整
  flexShrink: 0, // 禁止列表被压缩
});

2. 用Ref获取真实宽度并实现滚动逻辑 #

通过ref获取父容器和列表的真实尺寸，计算每次滚动的步长，同时提供两种滚动控制方式：

方式一：状态驱动滚动（适合需要同步状态的场景）

import { useState, useRef, useLayoutEffect, useEffect } from 'react';
import { Box } from '@mui/material';
import styled from '@emotion/styled';

const CarouselDisplay = ({ prev, next, ...props }) => {
  const [scroll, setScroll] = useState(0);
  const rootRef = useRef(null);
  const listRef = useRef(null);
  let scrollStep = 0;

  // 计算每次滚动的步长（父容器可视宽度）
  useLayoutEffect(() => {
    if (rootRef.current && listRef.current) {
      scrollStep = rootRef.current.clientWidth;
    }
  }, []);

  const prevHandler = () => {
    setScroll(prevScroll => {
      const newScroll = prevScroll - scrollStep;
      return Math.max(newScroll, 0); // 不允许滚动到负数位置
    });
  };

  const nextHandler = () => {
    setScroll(prevScroll => {
      const maxScroll = listRef.current.scrollWidth - rootRef.current.clientWidth;
      const newScroll = prevScroll + scrollStep;
      return Math.min(newScroll, maxScroll); // 不允许滚动超出列表范围
    });
  };

  // 同步状态到DOM滚动位置
  useEffect(() => {
    if (rootRef.current) {
      rootRef.current.scrollLeft = scroll;
    }
  }, [scroll]);

  return (
    <StyledRoot ref={rootRef}>
      <CarouselButton prev={prev} onClick={prevHandler} />
      <CarouselButton next={next} onClick={nextHandler} />
      <CarouselList ref={listRef} {...props} />
    </StyledRoot>
  );
};

// 样式定义同步骤1
const StyledRoot = styled(Box)({
  position: 'relative',
  marginBottom: '.5rem',
  background: 'transparent',
  overflowX: 'scroll',
  scrollbarWidth: 'thin',
  overflowY: 'hidden',
});

const CarouselList = styled(Box)({
  display: 'inline-flex',
  gap: '1rem',
  flexShrink: 0,
});

export default CarouselDisplay;

方式二：直接操作DOM滚动（更简洁，无需维护状态）

const CarouselDisplay = ({ prev, next, ...props }) => {
  const rootRef = useRef(null);
  let scrollStep = 0;

  useLayoutEffect(() => {
    if (rootRef.current) {
      scrollStep = rootRef.current.clientWidth;
    }
  }, []);

  const prevHandler = () => {
    rootRef.current?.scrollBy({ left: -scrollStep, behavior: 'smooth' });
  };

  const nextHandler = () => {
    rootRef.current?.scrollBy({ left: scrollStep, behavior: 'smooth' });
  };

  return (
    <StyledRoot ref={rootRef}>
      <CarouselButton prev={prev} onClick={prevHandler} />
      <CarouselButton next={next} onClick={nextHandler} />
      <CarouselList {...props} />
    </StyledRoot>
  );
};

// 样式定义同步骤1

关键说明 #

• 移除父容器的overflow: hidden（或仅保留overflowY: hidden），让子列表能完整渲染出所有内容，这样才能获取到真实的列表宽度。
• 使用inline-flex或flex + flex-wrap: nowrap确保列表横向排列且不换行。
• 两种滚动方式按需选择：状态驱动适合需要在其他地方同步滚动位置的场景，直接DOM操作更简洁高效。

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