如何实现js手动滚动图片_js长图滚动-优快云博客

本文链接：https://blog.youkuaiyun.com/landiyaaa/article/details/128737151

文章描述了一个使用CSS和JavaScript实现的图片滚动小组件，通过点击左右箭头按钮，图片集可以在可视窗口内平滑滚动，当滚动到边界时停止。主要涉及的技术包括React的useStatehook和原生DOM的scrollTo方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现一个如上图所示的小组件：点击图片集合左右两侧的箭头按钮，使图片集向左或向右滚动。滚动到头之后不再移动。

CSS部分：

<div class="parent">
    <div class="children" ref={imgContainerRef}>
        <img>
        <img>
        ...
    </div>
</div>

.parent {
    width: 980px;        // 定义可视窗口宽度
    overflow: hidden;    // 超出隐藏
}
.chilren {
    white-space: nowrap;    // 子元素不折行
}

左右移动点击逻辑

const imgContainerRef = useRef<HTMLDivElement>(null); // 存储原生dom元素

const [leftOffset, setLeftOffset] = useState<number>(0);     // 向左滚动的距离
 
const handleSlide = (direction: 'left' | 'right') => {
    const ITEM_MARGIN_RIGHT = 8; // 两图间隔
    const maxLeftOffset =
      50 * Number(images?.length) - ITEM_MARGIN_RIGHT - STEP;  // 能往左滚的最大距离

    let newOffset = leftOffset;
    if (direction === 'left') {
      if (leftOffset <= 0) {
        return;
      }
      const temp = leftOffset - STEP;
      newOffset = temp < 0 ? 0 : temp;
      setLeftOffset(newOffset);
      imgContainerRef.current?.scrollTo({    // 原生方法实现滚动，同时设置平滑动画效果
        left: newOffset,
        behavior: 'smooth',
      });
    } else {
      if (leftOffset >= maxLeftOffset) {
        return;
      }
      const temp = leftOffset + STEP;
      newOffset = temp > maxLeftOffset ? maxLeftOffset : temp;
      setLeftOffset(newOffset);
      imgContainerRef.current?.scrollTo({
        left: newOffset,
        behavior: 'smooth',
      });
    }
  };