如何使用JS动画化div滚动到页面加载时的最后一个孩子？

Question

[我正在尝试获取一个div的动画，当加载页面以创建幻灯片时，该动画向下滚动到它的最后一个孩子。

这里是div本身

<section class="carousel" id="carousel">
  <div class="images-container">
    <a href="#"><img src="img/berlin1.jpg" alt="pic 1" class="auto-resize"></a>
    <a href="#"><img src="img/berlin2.jpg" alt="pic 1" class="auto-resize"></a>
    <a href="#"><img src="img/berlin3.jpg" alt="pic 1" class="auto-resize"></a>
    <a href="#"><img src="img/berlin4.jpg" alt="pic 1" class="auto-resize"></a>
    <a href="#" id="lastimage"><img src="img/berlin5.jpg" alt="pic 1" class="auto-resize"></a>
  </div>
</section>

.carousel {
  position: relative;
  z-index: 1;
  grid-area: crsl;
  overflow-y: scroll;
  height: 100%;
  overflow: -moz-scrollbars-none;
}

.carousel::-webkit-scrollbar { width: 0 !important }

最终，我试图实现的是在页面加载时此div中的自动幻灯片放映。

Answer 1

如果自动幻灯片放映之外不需要滚动条，则可以通过指定div最小内容高度，然后使用translateY转换和过渡使图像在整个部分中滑动来删除滚动条。

我已经建立了一个示例：