![]() ![]() It can work where the interface is plainly not a 'normal' page - but rather a specialised interface that is being controlled using scrolling. Sorry, I didn't make my point very clearly. requestAnimationFrame() is 1 shot.Ĭreate a file in src/components/SmoothScroll/SmoothScroll.css and paste the code below. Note: Your callback routine must itself call requestAnimationFrame() again if you want to animate another frame at the next repaint. The method takes a callback as an argument to be invoked before the repaint. The window.requestAnimationFrame(**)** method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. Notice that we are calling the smoothScrolling function through requestAnimationFrame() function. The smoothScrolling function runs recursively changing the translate property on the " scrollingContainerRef div" whenever the user scroll. This useEffect runs only once and calls the smoothScrolling function.After passing "position: fixed" to the "parent div", this makes sure that we have enough room to scroll through the whole " scrollingContainerRef div" setBodyHeight makes the height property on equal to the height of the " scrollingContainerRef div". This useEffect runs only if the windowSize changes (if the user resizes the browser).data is not a state because we don't want our react component re-rendering each time we scroll.scrollingContainerRef is used to apply translateY property on the div, on the fly. ![]() useWindowSize() is a custom hook that returns the current innerWidth and innerHeight of the window.Import React, export default SmoothScroll Įnter fullscreen mode Exit fullscreen mode
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |