реакция-использование-жест useScroll не обнаруживает событие прокрутки - PullRequest
Новая
       10

реакция-использование-жест useScroll не обнаруживает событие прокрутки

0 голосов
/ 06 марта 2020

Я пытаюсь использовать библиотеку реагировать на использование жестов, но даже не могу заставить работать некоторые простые ловушки. Я пытаюсь использовать ловушку useScroll (в конце концов, чтобы запустить анимацию с реагирующей пружиной), но когда я связываю ее с моим компонентом, ничего не происходит. 

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;

У меня такое ощущение, что я упускаю что-то очевидное. У кого-нибудь есть идеи?

1 Ответ

1 голос
/ 06 марта 2020

Как ни странно, я не смог заставить работать хук 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>
  );
}

Edit vibrant-night-mrb6f

Было любопытно узнать, почему события прокрутки не перехватывались, а события мыши. Может быть, this проливает немного света на этот вопрос.

EDIT

Удалось заставить работать прокрутку, передавая необязательный объект конфигурации, в в этом случае установите для цели 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>
  );
}
...