how to make javascript scrollIntoView smooth?

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.

108745 次浏览

小开

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'
});

小开

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;