완전히 보이지 않는 경우 요소의 끝으로 스크롤

Question

많은 div가있는 상위 컨테이너가 하위로 있습니다.

상위 컨테이너에는 가로 스크롤이 있습니다.

onclick 완전히 보이지 않는 경우 어떻게 할 수 있습니까?

양방향 모두 작동해야합니다.

JS

예 여기/JQuery와/CSS : https://jsfiddle.net/04mzhagr/

.parent{ 
 
     width:100%; 
 
     white-space: nowrap; 
 
     overflow-y: hidden; 
 
     overflow-x: scroll; 
 
    } 
 
    .child{ 
 
     display:inline-block; 
 
     padding:10%; 
 
     background-color:blue; 
 
     margin:10px; 
 
    }

<div class='parent'> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
     <div class='child'> test</div> 
 
    </div>

Answer 1

<div id='parent' class='parent'> 
    <div class='child'> test</div> 
    <div class='child'> test</div> 
    <div class='child'> test</div> 
    <div class='child'> test</div> 
</div> 

<script> 
    var parent = document.getElementById("parent"); 
    parent.scrollLeft = parent.scrollWidth; 
</script> 

https://jsfiddle.net/bendela6/v7609Lw0/