Javascript: div的水平动画不流畅

Question

我有一个简单的Javascript脚本，可以自动滚动浏览"ReviewsWrapper"并在结束时最大限度地顺利重新开始这个动画。

现在，这个动画滞后于整个动画

是否有任何选项，我可以如何使这个动画，我在开始提到的?

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>

Answer 1

我正在搜索是什么造成了这个"jump"

这是review类的边距。取消保证金的问题是不好的看法。我只是把它编辑成你展示的样子。

:

<div class="review"><!-- with margin -->
<!-- all content -->
</div>

:后

<div class="review"><!-- without margin -->
<div class="sub-review"><!-- with padding -->
<!-- all content -->
</div>
</div>

这里有一个例子，没有边距和跳转:

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>