如何使用同样的类滚动到下一篇文章

Question

我试图让用户在使用鼠标轮时自动滚动到下一篇文章。下面的代码确实有效，但是它只滚动到下一篇文章一次。见以下图片：

另外，我禁用了溢出，这样用户就不能手动滚动

​

​

我有以下代码：

<article class="dienst-wrapper">
        ...
</article>


<article class="dienst-wrapper">
        ...
</article>

jQuery

function scrollToNextDiv(){
    var locatie = $('article.dienst-wrapper').next("article.dienst-wrapper");
    var offset = 0;
    var target = $(locatie).offset().top - offset;

    $('html, body').animate({scrollTop:target}, 750);
    event.preventDefault();
}

我怎么才能解决这个问题？谢谢！！

Answer 1

如果您的文章位于某个容器中，那么除了具有类"dienst-wrapper“的文章之外，这里没有其他元素，您可以按照以下步骤操作：

1. 在任何函数之外声明一些变量，例如： 变量articleIndex = 1；
2. 然后将函数重命名为： 函数scrollToDiv(articleIndex) {…}
3. 更改您的“位置”变量如下： var locatie =$(‘条文.locatie包装:nth-child(’+ articleIndex + ')')；
4. 在函数中，当您检测到滚动时，检查它是向下滚动还是向上滚动(我不知道您是如何做到的，所以我跳过了这方面的代码)，然后用增加或减少的articleIndex来激发函数，但是要记住避免低于1或高于文章的数量，代码应该看起来类似于这样： //内部滚动监听器函数if (向上滚动){ if (articleIndex > 1) {scrollToDiv(-武装索引)；}{ if (articleIndex <$(‘ticle.dienst-包装器’).length){ scrollToDiv(++articleIndex)；}}

如果文章中有其他元素，容器上的代码将无法工作。然后，您可以按照以下步骤操作：

1. 在任何函数之外声明一些变量，例如： 变量articleIndex = 0；
2. 获取数组的项目集合(仍在任何函数之外)： var articlesCollection =$(‘attle.dienst-包装器’)；
3. 然后将函数重命名为： 函数scrollToDiv(articleIndex) {…}
4. 更改您的“位置”变量如下： var定位= articlesCollectionarticleIndex；
5. 在函数中，当您检测到滚动时，检查它是向下滚动还是向上滚动(我不知道您是如何做到的，所以我跳过了这方面的代码)，然后用增加或减少的articleIndex来激发函数，但是要记住避免低于1或高于文章的数量，代码应该看起来类似于这样： //内部滚动监听器函数if (向上滚动){ if (articleIndex > 0) {scrollToDiv(-武装索引)；}{ if (articleIndex < articlesCollection.length - 1) { scrollToDiv(++articleIndex)；}}