html - Programatically position a scollbar of a div relative to its parent container -

i need programatically position scollbar of div relative parent container.

.outercontainer {    width: 400px;    height: 100px;    overflow: auto;  }  .innercontainer {    width: 100px;    overflow: auto;  }  div {    width: 200px;  }

<div class="outercontainer">    <div class="innercontainer">      <div>abcdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>      <div>abcd</div>      <div>abcd</div>      <div>abcd</div>      <div>abcd</div>      <div>abcd</div>      <div>abcd</div>      <div>abcd</div>      <div>abcd</div>      <div>abcd</div>      <div>abcd</div>      <div>abcd</div>      <div>abcd</div>      <div>abcd</div>    </div>  </div>

currently see horizontal scrollbar of innercontainer, need scroll down last line in outercontainer.

however, need fix innercontainer's horizontal scrollbar position don't have scroll down outercontainer last line in order see (preferably located @ top).

no matter scroll position of outercontainer, innercontainer's horizontal scrollbar should visible.

here jsfiddle : https://jsfiddle.net/khh5k197/

you don't need programatically, need overflow in right place. here's x scroll near long-line:

.outercontainer{    width: 400px;    height: 100px;    overflow: auto;  }  .innercontainer{width: 100px}  div {width: 200px}  .long-line {overflow: auto}

<div class="outercontainer">    <div class="innercontainer">      <div class="long-line"> abcdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div>      <div> abcd </div>      <div> abcd </div>      <div> abcd </div>      <div> abcd </div>      <div> abcd </div>      <div> abcd </div>      <div> abcd </div>      <div> abcd </div>      <div> abcd </div>      <div> abcd </div>      <div> abcd </div>      <div> abcd </div>      <div> abcd </div>    </div>  </div>

hope helps!

edit

rereading question, noticed wanted innercontainer scrollbar visible, if scroll down outercontainer.

unfortunately not option, since scrollbars belong element , located @ bottom , right (unless use direction: rtl) positions, when scroll outercontainer, innercontainer has no choice on matter (to put :).

however, can use plugin this one recreate scrollbars entirely, giving more freedom in can , can place them... may need tweak though.