React Scroll Wheel Handler (스크롤 컨트롤)

설치

npm install --save react-scroll-wheel-handler
or
yarn add react-scroll-wheel-handler

---

import

import ReactScrollWheelHandler from "react-scroll-wheel-handler"

---

사용법

<ReactScrollWheelHandler
  upHandler={(e) => console.log("scroll up")}
  downHandler={(e) => console.log("scroll down")}
>
  ...
</ReactScrollWheelHandler>

---

props

• upHandler: Function that is triggered on scroll up
• downHandler: Function that is triggered on scroll down
• leftHandler: Function that is triggered on scroll left
• rightHandler: Function that is triggered on scroll right
• CustomComponent: Component with forwardRef. It will be rendered in place of the container div.
• pauseListeners: Boolean. isRequired. Default: false. With this props you can block all events from be fired
• timeout: Integer. isRequired. Default: 600. Timeout between scroll.
• disableKeyboard: Boolean. Default: false.
• disableSwipe: Boolean. Default: false.
• disableSwipeWithMouse: Boolean. Default: false.
• preventScroll: Boolean. isRequired. Prevent scroll, if you want to implement your own scrolling. Default: false.
• wheelConfig: Array. Default: []. Set config for Lethargy lib. Example: [7, 100, 0.05]. stability, sensitivity, tolerance.

---

설명

주로 사용하는 메소드는
upHandler = { 스크롤 업할시 동작할 함수 }
upHandler = { 스크롤 다운할시 동작할 함수 }
timeout = { 스크롤이 타임아웃 되는 동안의 시간 default = 600ms }

---

사용하게된 계기

react-responsive-carousel를 사용해 섹션별로 스크롤해서 이동하는 페이지를 구성중이었는데 deltaY값을 이용해서 스크롤 컨트롤을 해보려했는데
문제점은 deltaY값이 들어오는것 보다 함수 실행이 더빠르고 들어오는값을 제어할 방법이 없었기에(떠오르는 방법이 없었다가 정확할 수 있다)
React Scroll Wheel Handler라이브러리를 활용했고 내가 원했던 한번의 스크롤링에 한번의 함수가 실행됬고 그에 맞게 콜백을 넣어서 원하는 정답에 도달할 수 있었다✌🏻