我正在尝试使用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;
我有一种感觉,我错过了一些明显的东西。有人有什么想法吗?
最佳答案
奇怪的是,我也无法让 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>
);
}
关于javascript - react 使用手势 useScroll 未检测到滚动事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60557815/