How to scroll to the farest right side of an overflowing div box?

Question

the title is quite verbose of what I want to achieve,

I have a div box which displays a scroll on narrow screens (overflow-x). Since that box contains a filesystem breadcrumbs I want to automatically scroll to the right side of that box as to improve the user experience as the user can quickly peep where he stands in the filesystem tree.

How can I do that using only native apis? no jquery or else.

Answer 1

You can get the maximum scroll width by using scrollWidth , then, just set the value of the div's scrollLeft to the max width:

 function scroll_it(){ the_box = document.getElementById("box"); the_box.scrollLeft = the_box.scrollWidth; }

 #box {width:100px; height:100px; overflow-x:scroll; background:red;}

 <div id="box"> ABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFGABCDEFG </div> <a href="#" onclick="scroll_it()">Click me to scroll</a>