Scroll Behavior — like a pro
Recently I saw a tutorial by Kent C. Dodds about react hooks — in this tutorial he mentions a css property called Scroll behavior.
This property was not something I met before — so I decided to do some research and share its results in this short article.
Some from the specifications first:
Whenever a viewport gets scrolled (whether in response to user interaction or by an API), the user agent runs a lot of steps under the hood — it checks if the element is in the viewport , and adds or removes doc pending scroll event targets.
You can simulate that behavior in chrome dev tools -the rendering tab — just check the paint flashing check box and try to scroll a long page.
As you can see the scroll bar in painted in every scroll event-
When scrolling happens due to navigation or CSSOM scrolling APIs, the scroll-behavior property specifies the scrolling behavior for a scrolling box (if it is all the document or a div with overflow ).
There are two main properties for scroll behavior -
‘Auto’ - the scroll happens instantly. (my definition 🤔)
‘Smooth’-The scrolling box is scrolled in a smooth fashion, using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if it exists. (from the W3C definition 😊)
Enough with theory — lets review some codes…
This is the example from the MDN web docs:
An interesting idea that I thought about is to implement an auto scroll to the bottom when an element is appended…
I used react hooks here…
and with scrollIntoView function…
BTW -
you can achieve the same behavior in scrollIntoView function with the this parameters:
element.scrollIntoView({ behavior: "smooth", block: "end"});
the block: “end” options is a nice one- it causes the element to scroll to the bottom of the scrolling element — no margin include (you can play with that in the example above- some options are in the comments)
And as always , browser support:
Firefox and Chrome — have a good support,
but again — IE/Edge — disappointing …
Maybe in the future (Edge with chromium … where are you???) … but yet — in the worst case — the page just jumps to the anchor point…)
Hope you found this short article useful. Thanks for reading.
