Javascript Jquery水平滚动并在每第三个子元素上停止

我有一个父

，它有20个子

元素

<div class="parent">
<div class="child">content A</div>
<div class="child">content B</div>
<div class="child">content C</div>
<div class="child">content A</div>
<div class="child">content B</div>
<div class="child">content C</div>
<div class="child">content A</div>
<div class="child">content B</div>
<div class="child">content C</div>
<div class="child">content A</div>
<div class="child">content B</div>
<div class="child">content C</div>
</div>

这是我的“下一步”按钮代码。正如您所看到的，我可以给“scrollAmount”任何数量的滚动量，但我想在滚动到达第三个子元素时停止滚动

 $('.control--next').click(function(){
        var currScroll = $parent[0].scrollLeft;
        $parent.animate({scrollLeft:currScroll + scrollAmount}, 300);
    });

我想要的是，当我单击“下一步”按钮时，它将水平滚动并在到达第三个子元素时停止。如果我再次单击“下一步”按钮，它将从当前位置再计数三次，直到到达终点

JSFiddle：

注意：由于嵌入式iframe滚动页面的方式，小提琴的行为可能有点奇怪

下面是Javascript（假设您有一个id为“next”的next按钮）：

如果您想进一步自定义滚动，可以使用window.scrollTo和elem.offestTop

---

今后，请给出一个更完整的例子。您提供的代码缺少“下一步”按钮，这导致人们必须编写自己的代码，很可能与您的代码不同，才能到达您已经到达的位置。

当用户使用滚动条、键盘、鼠标或其他输入设备启动滚动时，您显示的代码将运行。它与任何类型的按钮无关。请向孩子们展示一个演示此

，展示您可能拥有的任何CSS样式，并尝试自己解决此问题。您可以使用在堆栈溢出上提供可运行的代码段。谢谢，伙计，您的回答帮助我重新思考解决方案的方法。

 $('.control--next').click(function(){
        var currScroll = $parent[0].scrollLeft;
        $parent.animate({scrollLeft:currScroll + scrollAmount}, 300);
    });

var nextDivPosition = 2 //Lists start at 0

document.getElementById("next").addEventListener("click", function() {
    var elems = document.querySelectorAll(".parent > div")
  if (nextDivPosition > elems.length-1) {nextDivPosition = 2}
  elems[nextDivPosition].scrollIntoView()
  nextDivPosition += 3
})