如果元素不完全可見，則滾動到元素的末尾

Question

我有一個父容器，其中有很多div作爲子元素。

父容器有水平滾動。

如果onclick完全不可見，我該如何滾動到子div的末尾？

它應該適用於兩個方向。

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/