反应使用手势 useScroll 未检测到滚动事件

Question

我正在尝试使用 react-use-gesture 库，但似乎连一些简单的挂钩都无法正常工作。我正在尝试使用 useScroll 挂钩（最终获得动画运行 react-spring），但是当我将它绑定到我的组件时，没有任何反应。

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。根据 Options explained，建议使用效果挂钩而不是作为道具传播（虽然它在 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>
  );
}

Answer 2

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

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;

反应使用手势 useScroll 未检测到滚动事件

react-use-gesture useScroll not detecting scroll event

javascript

reactjs

react-spring