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

Question

我有一个<div>有 20 个子<div>元素的父级。

<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>

我使用以下 Jquery

$(parent).on('scroll', function(event){
    //my code here
});

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

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

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

标签： javascriptjquery

Answer 1

JSFiddle：https ://jsfiddle.net/wbndtzqu/2/

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

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

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
})

如果您想更多地自定义滚动，可以使用 window.scrollTo 和 elem.offestTop。

以后请举一个更完整的例子。您提供的那个缺少下一个按钮，导致人们不得不编写自己的代码，很可能与您的代码不同，才能到达您已经到达的位置。