![]() When using a site - the user should never be made to question or think about the interactions unnecessarily. Breaking or screwing with basic website operation on such a page could well confuse the user or make them question what is going on since the page appears to be a normal one. In your own example, the page is plainly and clearly a 'normal' page. 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. If you are importing it as a dependency, make sure to call the polyfill. When including the polyfill in a script tag, it will run immediately after loaded. 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. Download the production ready file here and include it in your project, or install it as a package. 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.There's actually a library that helps with that so implementation isn't a problem, but it's quite the added runtime cost for such a small feature, so I decided against it.Import React, export default SmoothScroll Įnter fullscreen mode Exit fullscreen mode Yep, it's definitely hacky (but totally works)! □īut afaik it's the only reliable way to detect CSS unknown to the browser without having to collect/fetch every single stylesheet on a page (with something like getElementsByTagName), parse through all of them with a Regex and repeat that every time some styles change. Safari supports it, but Safari doesn't support smooth scrolling. Unfortunately, Chrome does not support this. To circumvent this you can wrap the CSS property in a prefers-reduced-motion media query. People might get motion sickness when watching the animation. We could use Smart CSS to detect long pages and conditionally apply the smooth scroll style. If there is a lot of distance to travel, Firefox will skip content to keep the scroll time-limited, while Chrome has a max velocity and will just take its time to get to the target. The Scroll Behavior specification allows for native smooth scrolling in browsers both by using JavaScript scroll APIs like window.scrollTo and Element.scrollIntoView or by simply setting the property scroll-behavior to smooth in CSS, which will then make any scrolling smooth by default. We can set the scroll-behavior property to the container we want to exhibit smooth scroll behavior and we're done.īefore we go nuts and apply this to all our sites, there are a couple of things we need to keep in mind. Turns out there's a scroll-behavior CSS property that we can set to smooth, it's literally that literal. Then, Hans Spieß points out that this can also be done with CSS, WHAT!? I posted it on Twitter and called it a day. ScrollIntoViewOption currently only works on Firefox and Chrome. This jump can be really disorienting, so animating this process would improve the user experience quite a bit. ![]() I quickly jumped on my JavaScript horse and wrote a tiny script to automatically detect clicks on anchors so the browser would animate the jump towards the anchor target. Enter fullscreen mode Exit fullscreen mode
0 Comments
Leave a Reply. |