Auto move Horizontal scroll bar to right end in div

Question

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.

Answer 1

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.