Tengo un script Javascript simple que puede desplazarse automáticamente a través de todos los divs dentro de "ReviewsWrapper" y, al final, comenzar de nuevo sin problemas esta animación desde el principio.
Ahora, esta animación está retrasada en toda la animación.
¿Hay alguna opción de cómo puedo hacer esta animación como mencioné al principio?
const flavoursContainer = document.getElementById('ReviewsWrapper'); const flavoursScrollWidth = flavoursContainer.scrollWidth; window.addEventListener('load', () => { self.setInterval(() => { const first = document.querySelector('#ReviewsWrapper div'); if (!isElementInViewport(first)) { flavoursContainer.appendChild(first); flavoursContainer.scrollTo(flavoursContainer.scrollLeft - first.offsetWidth, 0); } if (flavoursContainer.scrollLeft !== flavoursScrollWidth) { flavoursContainer.scrollTo(flavoursContainer.scrollLeft + 1, 0); } }, 5); }); function isElementInViewport(el) { var rect = el.getBoundingClientRect(); return rect.right > 0; } #ReviewsWrapper { position: relative; max-width: 100vw; overflow-y: hidden; overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none; display: flex; justify-content: flex-start; align-items: center; } .review { min-width: 300px; display: flex; align-items: center; justify-content: center; padding: 8px; margin: 8px; background: yellow; } p { margin-left: 8px; } <div id="ReviewsWrapper"> <div class="review"> <img src="https://via.placeholder.com/150"> <p>Review ONE </p> </div> <div class="review"> <img src="https://via.placeholder.com/150"> <p>Review TWO </p> </div> <div class="review"> <img src="https://via.placeholder.com/150"> <p>Review THREE </p> </div> <div class="review"> <img src="https://via.placeholder.com/150"> <p>Review FOUR </p> </div> <div class="review"> <img src="https://via.placeholder.com/150"> <p>Review FIVE </p> </div> <div class="review"> <img src="https://via.placeholder.com/150"> <p>Review SIX </p> </div> </div>Estaba buscando qué estaba creando este "salto".
Es el margen de la clase de review . El problema con la eliminación del margen es la mala vista. Solo lo edito para que quede como lo muestras.
Antes:
<div class="review"><!-- with margin --> <!-- all content --> </div>Después:
<div class="review"><!-- without margin --> <div class="sub-review"><!-- with padding --> <!-- all content --> </div> </div>Aquí un ejemplo, sin margen y sin salto:
const flavoursContainer = document.getElementById('ReviewsWrapper'); const flavoursScrollWidth = flavoursContainer.scrollWidth; window.addEventListener('load', () => { self.setInterval(() => { const first = document.querySelector('#ReviewsWrapper div'); if (!isElementInViewport(first)) { flavoursContainer.appendChild(first); flavoursContainer.scrollTo(flavoursContainer.scrollLeft - first.offsetWidth, 0); } if (flavoursContainer.scrollLeft !== flavoursScrollWidth) { flavoursContainer.scrollTo(flavoursContainer.scrollLeft + 1, 0); } }, 5); }); function isElementInViewport(el) { var rect = el.getBoundingClientRect(); return rect.right > 0; } #ReviewsWrapper { position: relative; max-width: 100vw; overflow-y: hidden; overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none; display: flex; justify-content: flex-start; align-items: center; } .review { min-width: 300px; padding: 8px; } .sub-review { padding: 8px 0px 8px 0px; align-items: center; justify-content: center; display: flex; width: 100%; background: yellow; } p { margin-left: 8px; } <div id="ReviewsWrapper"> <div class="review"> <div class="sub-review"> <img src="https://via.placeholder.com/150"> <p>Review ONE</p> </div> </div> <div class="review"> <div class="sub-review"> <img src="https://via.placeholder.com/150"> <p>Review TWO</p> </div> </div> <div class="review"> <div class="sub-review"> <img src="https://via.placeholder.com/150"> <p>Review THREE</p> </div> </div> <div class="review"> <div class="sub-review"> <img src="https://via.placeholder.com/150"> <p>Review FOUR</p> </div> </div> <div class="review"> <div class="sub-review"> <img src="https://via.placeholder.com/150"> <p>Review FIVE</p> </div> </div> <div class="review"> <div class="sub-review"> <img src="https://via.placeholder.com/150"> <p>Review SIX</p> </div> </div> </div>