Как анимировать прокрутку div до последнего дочернего элемента при загрузке страницы, используя JS?

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 }

В конечном итоге я пытаюсь добиться автоматического c слайд-шоу в этом разделе при загрузке страницы.

Answer 1

Если вам не нужна полоса прокрутки, кроме автоматического показа слайдов c, вы можете удалить полосу прокрутки, задав высоту содержимого div min, а затем используя преобразование translateY и переход, чтобы изображения скользили по вашему разделу. .

Я настроил пример:

let imagesContainer = document.getElementById("images-container");
let lastImgHeight = 0;
window.onload = () => {
    lastImgHeight = document.getElementById("last-img").clientHeight;
    document.getElementById("carousel").style.maxHeight = `${lastImgHeight}px`;
};

setTimeout(() => {
    imagesContainer.classList.add("images-container-animate");
    imagesContainer.classList.remove("images-container");
    imagesContainer.style.transform = `translateY(${-(imagesContainer.clientHeight - lastImgHeight)}px)`;
}, 100);

.images-container {
	height: min-content;
	display: flex;
	flex-direction: column;
	transform: translateY(0);
}

.images-container-animate {
	transition: transform 6s;
	transition-timing-function: linear;
        display: flex;
	flex-direction: column;
}

#carousel {
	overflow-y: hidden;
}

<section class="carousel" id="carousel">
  <div class="images-container" id="images-container">
    <a href="#"><img src="https://cdn.pixabay.com/photo/2020/03/10/08/39/cloud-4918228_960_720.jpg"
        alt="pic 1"></a>
    <a href="#"><img src="https://cdn.pixabay.com/photo/2020/03/30/17/15/funes-4984899_960_720.jpg"
        alt="pic 1"></a>
    <a href="#"><img src="https://cdn.pixabay.com/photo/2020/03/31/11/59/sunrise-4987384_960_720.jpg"
        alt="pic 1" id="last-img"></a>
  </div>
</section>