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>元素时停止。如果再次单击“下一步”按钮，它将从当前位置开始计数另外3个<div>，直到到达末尾。

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。

将来，请提供更完整的示例。您提供的代码缺少下一个按钮，导致人们不得不编写自己的代码（很可能与您的代码有所不同）才能到达您已经存在的位置。

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

1 个答案: