反应水平平滑滚动答案

【问题标题】：React Horizontal Smooth Scroll反应水平平滑滚动
【发布时间】：2020-07-29 00:23:23
【问题描述】：

这是一个非常模糊的问题，因为我正在努力寻找解决方案-

谁能推荐一个在 React-NOT Native 中水平平滑滚动的包或技术？

（它将是整个应用程序，而不是菜单）

【问题讨论】：

标签： reactjs horizontal-scrolling smooth-scrolling

【解决方案1】：

您可以尝试使用react-smooth-scroll-hook，它使用requestAnimationFrame 来完成滚动行为。

下面的基本用法

import React, { useRef } from 'react';
import useSmoothScroll from 'react-smooth-scroll-hook';
export const Demo = () => {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollTo } = useSmoothScroll({
    ref,
    speed: 100,
    direction: 'y',
  });

  return (
    <>
      <button onClick={() => scrollTo('#item-20')}>scrollTo('#item-20')</button>
      <div
        ref={ref}
        style={{
          overflowY: 'scroll',
          maxHeight: '200px',
        }}
      >
        {Array(100)
          .fill(null)
          .map((_item, i) => (
            <div key={i} id={`item-${i}`}>
              item-{i}
            </div>
          ))}
      </div>
    </>
  );
};

【讨论】：

这看起来像是你自己的项目。请阅读our requirements，您必须披露您的联系。