如何使用鼠标滚轮进行 React 水平滚动

Question

我在 React js 上使用了 tailwind-CSS，当用户将鼠标悬停在卡片部分时，我想使用鼠标滚轮水平滚动，以便 PC 用户可以使用鼠标滚轮而不是同时使用 Shift 和鼠标滚轮来水平滚动。随时随地生活

        <div className="flex space-x-3 overflow-y-scroll scrollbar-hide p-3 -ml-3">
          {cardsDate?.map(({ img, title }) => (
            <MediumCard key={img} img={img} title={title} /> 
          ))}
        </div>
    </section>

Answer 1

您可以使用自定义滚动函数作为 div 的引用。

export function useHorizontalScroll() {
  const elRef = useRef();
  useEffect(() => {
    const el = elRef.current;
    if (el) {
      const onWheel = e => {
        if (e.deltaY == 0) return;
        e.preventDefault();
        el.scrollTo({
          left: el.scrollLeft + e.deltaY,
          behavior: "smooth"
        });
      };
      el.addEventListener("wheel", onWheel);
      return () => el.removeEventListener("wheel", onWheel);
    }
  }, []);
  return elRef;
}

上述函数可以按如下方式导入和使用：

    <div className="App" ref={scrollRef} style={{ overflow: "auto" }}>
      <div style={{ whiteSpace: "nowrap" }}>
        <Picture />
      </div>
    </div>

我创建了一个codesandbox作为示例。