In a react app, I have a method being called to bring a particular node into view as follows.
scrollToQuestionNode(id) {
const element = document.getElementById(id);
element.scrollIntoView(false);
}
The scroll happens fine, but the scroll action is a little jerky. How can I make it smooth? I don't see any options which I can give to scrollIntoView for the same.
This might help.
From MDN documentation of scrollIntoView You can pass in option instead of boolean.
scrollIntoViewOptions Optional
A Boolean or an object with the following options:
{
behavior: "auto" | "instant" | "smooth",
block: "start" | "center" | "end" | "nearest",
inline: "start" | "center" | "end" | "nearest",
}
So you can simply pass parameter like this.
scrollToQuestionNode(id) {
const element = document.getElementById(id);
element.scrollIntoView({ block: 'end', behavior: 'smooth' });
}
Reference: https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView
For multibrowser support use the smooth-scroll-polyfill from here
For easy implementation use a wrapper like this around the polyfill so the .js polyfill method would be inizialized after loading:
https://codepen.io/diyifang/embed/MmQyoQ?height=265&theme-id=0&default-tab=js,result&embed-version=2
Now this should work cross browser:
document.querySelector('.foo').scrollIntoView({
behavior: 'smooth'
});
general.smoothScroll configuration. guidingtech.com/how-to-enable-firefox-smooth-scrolling Otherwise, it works out of the box.Use this CSS on the div with the scrollbar:
.element-with-the-scrollbar {
overflow-y: scroll;
scroll-behavior: smooth;
}
This gives smooth scrolling even when you just do:
elementWithTheScrollbar.scrollTop = 0;
What saved me was applying CSS smooth behavior with JS:
document.documentElement.style.scrollBehavior = "smooth";
Just before calling the function
document.getElementById("id-name").scrollIntoView();
I don't know if this can help too but I'm working on a Vue app I had a similar need, since removing one of the last elements on a page list left blank space on the bottom (I needed to remove the blank space by scrolling down). So, the removing happens through a button function. After all's done and when it's needed, I'm targeting the last div in the list and stating
div.scrollIntoView({block: "end", behavior: "smooth"})
