CODEWITHSUNDEEP
javascripthtmlangular
Muthu Kumar
Muthu Kumar

Reputation: 945

Auto move Horizontal scroll bar to right end in div

I have a div which is in the fixed header table format which has more than 24 columns.

The table contains columns in ascending order and it has a horizontal and vertical scroll bar.

So I need to move the horizontal scroll bar of div to right end during the loading. I'm using angular 7 for frontend.

I have tried by using javascript scrollIntoView but it is not working.

Anyone suggest me a way to achieve this using angular or javascript but not jquery.

Upvotes: 11

Views: 19369

Answers (2)

Zoltán Tamási
Zoltán Tamási

Reputation: 12754

You can achieve this with pure JavaScript, using the Element.scrollLeft and Element.scrollWidth properties in combination.

See the documentation here and here.

Something like this should work.

myDivElement.scrollLeft = myDivElement.scrollWidth;

Here is a fiddle demonstrating the technique.

Not tested thoroughly though, and also not sure about browser compatibility and minor tweaks. Use this just as an initial hint.

Upvotes: 23

Sasi Kumar M
Sasi Kumar M

Reputation: 2630

HTML DOM Scrollleft property would do the trick. https://www.w3schools.com/jsref/prop_element_scrollleft.asp

Upvotes: 2

Related Questions