javascript - react 使用手势 useScroll 未检测到滚动事件

Question

我正在尝试使用react-use-gesture库，但似乎甚至无法让一些简单的 Hook 工作。我正在尝试使用 useScroll 钩子(Hook)(最终让动画与react-spring一起运行)，但是当我将它绑定(bind)到我的组件时，什么也没有发生。

import { useScroll} from 'react-use-gesture';

function App() {
    const bind = useScroll((e) => {
        e.scrolling ? console.log("I'm being scrolled") : console.log("I'm not being scrolled");

    });
    return (
        <div className="App" {...bind()}>
            // All of my other components in App
        </div>
    );
}

export default App;

我有一种感觉，我错过了一些明显的东西。有人有什么想法吗？

Answer 1

奇怪的是，我也无法让 useScroll Hook 工作，但 useWheel Hook 工作得很好。

import React from "react";
import { useWheel } from "react-use-gesture";
import "./styles.css";

export default function App() {
  const wheel = useWheel(state => {
    console.log("wheeling", state.wheeling);
  });
  return (
    <div className="App" {...wheel()}>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

很好奇为什么滚动事件没有被拾取，但鼠标事件却被拾取。也许this为此事提供了一些线索。

编辑

能够通过传递可选的配置对象来实现滚动，在本例中，将 DOM 目标设置为 window。根据Options explained建议使用效果钩子(Hook)而不是作为 Prop 传播(尽管它在codesandbox传播中起作用)。

export default function App() {
  const scroll = useScroll(state => {
    console.log("scrolling", state.scrolling);
  }, {
    domTarget: window,
  });

  useEffect(scroll, [scroll]);

  return (
    <div className="App" >
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}