如果元素不完全可见，则滚动到元素的末端

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/