javascript - react-use-gesture useScroll not detecting scroll event - Stack Overflow

admin管理员组

文章数量:1410716

I am trying to use the react-use-gesture library, but can't even seem to get some simple hooks working. I'm trying to use the useScroll hook (eventually to get an animation running with react-spring), but when I bind it to my ponent, nothing happens.

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 ponents in App
        </div>
    );
}

export default App;

I have a feeling I'm missing something obvious. Does anyone have any ideas?

I am trying to use the react-use-gesture library, but can't even seem to get some simple hooks working. I'm trying to use the useScroll hook (eventually to get an animation running with react-spring), but when I bind it to my ponent, nothing happens.

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 ponents in App
        </div>
    );
}

export default App;

I have a feeling I'm missing something obvious. Does anyone have any ideas?

• javascript
• reactjs
• react-spring

Share Follow asked Mar 6, 2020 at 4:56 RogyBearRogyBear 9322 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Oddly enough, I wasn't able to get the useScroll hook to work either, but the useWheel hook works just fine.

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

Was curious as to why scroll events weren't getting picked up but the mouse events were. Maybe this sheds a bit of light on the matter.

EDIT

Was able to get the scrolling working by passing optional config object, in this case, setting the DOM target to window. According to Options explained it is remended to use an effect hook versus spreading in as a prop (though it worked in the codesandbox spread in).

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

You just need to set overflow property to scroll in your container's style, otherwise no scroll event beside window's will be trigger.

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 ponents in App
        </div>
    );
}

export default App;

本文标签： javascriptreactusegesture useScroll not detecting scroll eventStack Overflow