Jquery从头开始，当一个潜水到达滚动结束

Question

所以我试图创建一个自动水平滚动div，它可以在无限循环中不断滚动元素。这就是我迄今为止所取得的成就：

$(document).ready(function(){
function animatethis(targetElement, speed) {
var scrollWidth = $(targetElement).get(0).scrollWidth;
var clientWidth = $(window).width();
$(targetElement).animate({ scrollLeft: scrollWidth - clientWidth },
{
duration: speed,
complete: function () {
$(targetElement).scrollLeft(0);
animatethis(targetElement, speed);
}
});
};
animatethis($('.editors-pick-slideshow'), 10000);
});

.editors-pick-slideshow {
border: 1px solid;
width: 100%;
height: 500px;
overflow-y: hidden;
overflow-x: auto;
display: block;
margin: auto;
}
.editors-pick-container {
width: 3150px;
}
.editors-pick-container > div {
display: inline-block;
width: 1000px;
margin: 0px 20px;
}
.editors-pick-elements {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 1000px;
min-width: 300px;
border: 1px solid green;
height: 500px;
grid-gap: 20px;
margin: auto;
}
.pick1 {
background-color: #ccc;
}
.pick2 {
background-color: #ccc;
}
.pick3 {
background-color: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="editors-pick-slideshow">
<div id="editorsPickContainer" class="editors-pick-container">
<div>
<div id="group1" class="editors-pick-elements">
<div class="pick1">Grid 1</div>
<div class="pick2">Grid 1</div>
</div>
</div>
<div>
<div id="group2" class="editors-pick-elements">
<div class="pick1">Grid 2</div>
<div class="pick2">Grid 2</div>
</div>
</div>
<div>
<div id="group3" class="editors-pick-elements">
<div class="pick1">Grid 3</div>
<div class="pick2">Grid 3</div>
</div>
</div>
</div>
</div>

正如您在上面的片段中看到的，当动画到达div的末尾时，它会突然从头开始。我想在这里实现的是，当动画到达结尾时，它应该继续向网格1元素流动，并以无限的方式保持平滑滚动。我希望我说的有道理。

Answer 1

您可以添加一个布尔参数，指示向哪个方向滚动，并在每次动画完成时否定该参数。

function animatethis(targetElement, toEnd, speed) {
let pos;
if (toEnd) {
let scrollWidth = $(targetElement).get(0).scrollWidth;
let clientWidth = $(window).width();
pos = scrollWidth - clientWidth;
} else {
pos = 0;
}
$(targetElement).animate({
scrollLeft: pos
}, {
duration: speed,
complete: function() {
animatethis(targetElement, !toEnd, speed);
}
});
}
animatethis($('.editors-pick-slideshow'), true, 10000);

实例：

$(document).ready(function(){
function animatethis(targetElement, toEnd, speed){
let pos;
if(toEnd){
let scrollWidth = $(targetElement).get(0).scrollWidth;
let clientWidth = $(window).width();
pos = scrollWidth - clientWidth;
} else {
pos = 0;
}
$(targetElement).animate({ scrollLeft:  pos},
{
duration: speed,
complete: function () {
animatethis(targetElement, !toEnd, speed);
}
});
}
animatethis($('.editors-pick-slideshow'), true, 10000);
});

.editors-pick-slideshow {
border: 1px solid;
width: 100%;
height: 500px;
overflow-y: hidden;
overflow-x: auto;
display: block;
margin: auto;
}
.editors-pick-container {
width: 3150px;
}
.editors-pick-container > div {
display: inline-block;
width: 1000px;
margin: 0px 20px;
}
.editors-pick-elements {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 1000px;
min-width: 300px;
border: 1px solid green;
height: 500px;
grid-gap: 20px;
margin: auto;
}
.pick1 {
background-color: #ccc;
}
.pick2 {
background-color: #ccc;
}
.pick3 {
background-color: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="editors-pick-slideshow">
<div id="editorsPickContainer" class="editors-pick-container">
<div>
<div id="group1" class="editors-pick-elements">
<div class="pick1">Grid 1</div>
<div class="pick2">Grid 1</div>
</div>
</div>
<div>
<div id="group2" class="editors-pick-elements">
<div class="pick1">Grid 2</div>
<div class="pick2">Grid 2</div>
</div>
</div>
<div>
<div id="group3" class="editors-pick-elements">
<div class="pick1">Grid 3</div>
<div class="pick2">Grid 3</div>
</div>
</div>
</div>
</div>