Make changes onScrollUp div or page in React JS. Make changes on page or div onScrollDown React App Tutorial. How to get the scroll direction is React App. Style change on scrolling the React App page – resize buttons, hide or show elements on scroll.
onScrollUp & onScollDown Actions in React Apps
We can implement all the scroll-based conditioning and rendering of our web pages using the react-use-scroll-direction package.
yarn add react-use-scroll-direction
npm i react-use-scroll-directionNPM Package: https://www.npmjs.com/package/react-use-scroll-direction
Documentation: https://github.com/ifeanyiisitor/react-use-scroll-direction
This package provides us the scroll directions – whether the user had scrolled up or down. Based on the scroll directions received we can do conditional rendering in our React App.
Like we can resize the button like FloatActionButton of Gmail – which shrinks on scroll down and restores on scroll up. So it makes a more comfortable view and experience for the use.
