如何实现js手动滚动图片

landiyaaa

已于 2023-02-09 20:10:54 修改

阅读量1.3k

点赞数

分类专栏： react css 文章标签： css html css3 Powered by 金山文档

于 2023-01-19 19:03:15 首次发布

本文链接：https://blog.csdn.net/landiyaaa/article/details/128737151

版权

react 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

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

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',
      });
    }
  };