Question

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

有人可以推荐一个在React- NOT Native中用于水平平滑滚动的软件包或技术吗？

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

Answer 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>
    </>
  );
};

反应水平平滑滚动

1 个答案: