如果元素不完全可见，则滚动到元素的末尾[重复]答案

【问题标题】：Scroll to the end of the element if it is not fully visible [duplicate]如果元素不完全可见，则滚动到元素的末尾[重复]
【发布时间】：2017-04-19 03:51:02
【问题描述】：

我有一个父容器，其中有很多 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>

【问题讨论】：

标签： javascript jquery html css

【解决方案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/

【讨论】：

是的，它不起作用))))
您的示例无法运行，因为您没有编写 onclick 函数，即使我们添加了该函数，您的代码也无法运行，因为父元素没有 scrollLeft 属性。