I need to horizontally scroll to a div id using React.JS ?

Question

scrollFunc()
{    
     document.getElementById("myID").scrollIntoView({"block":"center"})    
}

I tried scrollIntoView({"block":"center"}) works perfect in chrome but has issues on Internet Explorer !

Answer 1

scrollIntoView has partial support in IE/Edge.

scrollIntoView({"block":"center"}) is not supported by IE/Edge

---

• You have the option scrollIntoView(true) which corresponds to

scrollIntoView({block: "start", inline: "nearest"})

• You have the option scrollIntoView(false) which corresponds to

scrollIntoView({block: "end", inline: "nearest"})

---

I would recommend using other API or approach if you need {"block":"center"} .

Read more about it here.

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView https://caniuse.com/#search=scroll

Answer 2

Give this a try,

To get the position of any element in page, you can use 'getBoundingClientRect' method like this, and window.scrollTo() to scroll to that particular location.

var htmlElement = document.getElementById('container'); var elementPosition = element.getBoundingClientRect() window.scrollTo(elementPosition.left, 0)

Also refer this link for more learning: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect