反应-使用手势useScroll不检测滚动事件

Question

我试图使用反应-使用手势库，但似乎连一些简单的钩子都无法工作。我正在尝试使用useScroll钩子(最终获得一个带有react的动画)，但是当我将它绑定到我的组件时，什么都不会发生。

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钩子工作，但是useWheel钩子工作得很好。

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

​

​

我很好奇为什么滚动事件没有被捡起来，但是鼠标事件却是。也许这对这件事有一点了解。

编辑

通过传递可选的配置对象(在本例中，将DOM目标设置为window )，可以使滚动工作。根据解释备选方案，建议使用效果钩子，而不是将其作为支柱(虽然它在代码框中有效)。

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

Answer 2

您只需要在容器的样式中将overflow属性设置为scroll，否则将不会触发窗口旁边的滚动事件。

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" style={{overflow: 'scroll'}} {...bind()}>
            // All of my other components in App
        </div>
    );
}

export default App;