在React中如何实现横向滚动容器按百分比设置滚动步长？

完全可以实现，只需将固定像素步长替换为容器宽度25%的动态计算值即可解决响应式适配问题，具体修改方案如下：

核心思路 #

• scrollLeft仅支持接收像素值，不能直接写入百分比参数，需要每次滚动前动态计算当前容器可见宽度的25%作为滚动步长
• 推荐使用React的useRef绑定容器DOM，替代原生getElementById写法，更符合React开发规范

代码实现 #

第一步：绑定滚动容器ref #

import { useRef } from 'react';

const YourComponent = () => {
  const programCardRef = useRef(null);
  // 其他状态声明如isLeftSlide、isRightSlide...

  return (
    // 给你的flex横向滚动容器绑定ref
    <div ref={programCardRef} id="programCard" style={{/* 原有容器样式 */}}>
      {/* 子项卡片内容 */}
    </div>
  )
}

第二步：修改滚动事件函数 #

const scrollLeftHandler = () => {
  const elmnt = programCardRef.current;
  if (!elmnt) return;
  // 动态计算25%宽度作为步长
  const scrollStep = elmnt.clientWidth * 0.25;

  if (elmnt.scrollLeft !== 0) {
    elmnt.scrollLeft -= scrollStep;
    setIsRightSlide(true);
  } else {
    setIsLeftSlide(false);
  }
};

const scrollRightHandler = () => {
  const elmnt = programCardRef.current;
  if (!elmnt) return;
  const scrollStep = elmnt.clientWidth * 0.25;
  // 新增最大滚动距离判断，避免滚出内容边界
  const maxScrollLeft = elmnt.scrollWidth - elmnt.clientWidth;

  if (elmnt.scrollLeft % scrollStep === 0 && isRightSlide) {
    setIsLeftSlide(true);
    const targetScroll = elmnt.scrollLeft + scrollStep;
    elmnt.scrollLeft = targetScroll > maxScrollLeft ? maxScrollLeft : targetScroll;
  } else if (isRightSlide) {
    const alignedScroll = elmnt.scrollLeft - (elmnt.scrollLeft % scrollStep);
    const targetScroll = alignedScroll + scrollStep;
    elmnt.scrollLeft = targetScroll > maxScrollLeft ? maxScrollLeft : targetScroll;
    setIsRightSlide(false);
  } else {
    setIsRightSlide(false);
  }
};

补充说明 #

• 如果不想调整原有DOM获取逻辑，直接把代码中所有固定值420替换为elmnt.clientWidth * 0.25也能实现相同效果
• 若子项之间设置了gap间距，计算步长时可以加上对应的间隙值，保证滚动位置完全对齐子项
• 如需丝滑滚动效果，可以将scrollLeft赋值改为elmnt.scrollTo({ left: 目标滚动值, behavior: 'smooth' })

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