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

Question

我有一个父容器，有很多div作为孩子。

父容器具有水平滚动。

如果完全不可见，我如何onclick滚动到子div的末尾？

它应该适用于两个方向。

JS / jQuery的/ CSS

此处示例：https://jsfiddle.net/04mzhagr/

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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/