如何使用相同的类滚动到下一篇文章ON SCROLL

Question

我试图让用户在使用鼠标滚轮时自动滚动到下一篇文章。以下代码可以工作，但是，它只滚动到下一篇文章ONCE。见下图：

另外，我禁用了溢出，因此用户无法手动滚动

我有以下代码：

HTML

<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. 在任何函数之外声明一些变量，例如：

   var articleIndex = 1;
   

2. 然后将您的函数重命名为：

   function scrollToDiv(articleIndex) {...}
   

3. 如下所示更改“locatie”变量：

   var locatie = $('article.dienst-wrapper:nth-child(' + articleIndex + ')');
   

4. 在功能中，你检测到滚动，检查它是向下滚动还是向上滚动（我不知道你是怎么做的所以我为此跳过代码）然后使用增加或减少的articleIndex来触发函数，但要记住要避免低于1且高于文章数量，代码应该与此类似：

   //inside scroll listener function
   if (scroll up) {
       if (articleIndex > 1) {
           scrollToDiv(--articleIndex);
       }
   } else {
       if (articleIndex < $('article.dienst-wrapper').length) {
           scrollToDiv(++articleIndex);
       }
   }
   

如果你在文章容器中有一些其他元素，那么上层代码将无效。然后您可以按照以下步骤操作：

1. 在任何函数之外声明一些变量，例如：

   var articleIndex = 0;
   

2. 将文章集合收集到数组中（仍在任何函数之外）：

   var articlesCollection = $('article.dienst-wrapper');
   

3. 然后将您的函数重命名为：

   function scrollToDiv(articleIndex) {...}
   

4. 如下所示更改“locatie”变量：

   var locatie = articlesCollection[articleIndex];
   

5. 在功能中，你检测到滚动，检查它是向下滚动还是向上滚动（我不知道你是怎么做的所以我为此跳过代码）然后使用增加或减少的articleIndex来触发函数，但要记住要避免低于1且高于文章数量，代码应该与此类似：

   //inside scroll listener function
   if (scroll up) {
       if (articleIndex > 0) {
           scrollToDiv(--articleIndex);
       }
   } else {
       if (articleIndex < articlesCollection.length - 1) {
           scrollToDiv(++articleIndex);
       }
   }