![]() However, care should still be taken with the 'feel' of the scrolling - the first of the examples above is fine in this respect, but the others feel a little too elastic. This type of interaction can indeed can be very effective. If this is self evident from the page - the user will probably not have the expectation of scrolling working in the normal manner. 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.
0 Comments
Leave a Reply. |