react 无限水平滚动

import React from 'react';
import styled from 'styled-components';

const Main = styled.div`
  display: flex;
  width: 100vw;
  overflow: hidden;
`;

const Group = styled.div`
  display: flex;
  flex-shrink: 0;
`;

const GroupMain = styled.div`
  display: flex;
  flex-shrink: 0;
`;

export const InfiniteLeftScroll = ({
  comments = [],
  renderItem = () => {},
  ...props
} = {}) => {
  const ref = React.useRef(undefined);
  const [width, changeWidth] = React.useState(0);
  const [time, changeTime] = React.useState(0);
  const [run, changeRun] = React.useState(false);

  React.useEffect(() => {
    if (run === false) {
      const { scrollWidth } = ref.current;
      const move_base = 5 / 375 // 5 秒内移动 375px;

      changeTime(scrollWidth * move_base);

      changeWidth(scrollWidth);

      changeRun(true);
    }
  }, [run]);

  return (
    <Main {...props}>
      <Group
        className="group"
        style={{
          transition: `transform ${time}s linear`,
          transform: `translateX(-${width}px)`,
        }}
        onTransitionEnd={() => {
          changeTime(0);
          changeWidth(0);
          changeRun(false);
        }}
      >
        <GroupMain ref={ref}>{comments.map(renderItem)}</GroupMain>

        {comments.slice(0, 3).map(renderItem)}
      </Group>
    </Main>
  );
};

未处理内容太短的情况（未超过一个屏幕）