CODEWITHSUNDEEP
javascriptreactjs
Rhythm Walia
Rhythm Walia

Reputation: 161

scrollTop vs scrollIntoView: why scrollTop didn't work?

I am using react to create a component which needs to be scrolled to the bottom on page load. First I used scrollTop

element.scrollTop = element.scrollHeight

but no scrolling happened. However following worked

element.scrollIntoView(false)

Now from MDN, I understand that setting a high value of scrollTop should tell browser to scroll to the bottom and it should be working with all the latest versions of the browsers. Am I wrong in my understanding here?

Upvotes: 2

Views: 4389

Answers (1)

Pietro Nadalini
Pietro Nadalini

Reputation: 1800

scrollTop isn't used to move an element or your scroll position. What it does is:

Get the number of pixels the content of a <div> element is scrolled vertically

So for scrolling in your page you need to use scrollIntoView, which moves the current view of the page into the element you are currently selecting. If you want to move to the top of that element or do some other behaviors you can check the documentation about this method.

The scrollIntoView() method scrolls the specified element into the visible area of the browser window.

Upvotes: 2

Related Questions