how to make javascript scrollIntoView smooth?

Question

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.

Answer 1

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