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

Question

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

此外，我禁用了溢出功能，这样用户就无法手动滚动

我有以下代码：

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

如果您的文章在某个容器中，除了带有 class "dienst-wrapper" 的文章之外没有其他元素，您可以按照以下步骤操作：

在任何函数之外声明一些变量，例如：
```
var articleIndex = 1;
```

然后将函数重命名为：

function scrollToDiv(articleIndex) {...}

更改您的 "locatie" 变量如下：

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

在函数中，检测滚动的地方，检查它是向下滚动还是向上滚动（我不知道你是怎么做到的，所以我跳过了这部分代码），然后用 increased 触发函数或减少 articleIndex，但请记住避免低于 1 和高于文章数量，代码应类似于以下内容：
```
//inside scroll listener function
if (scroll up) {
    if (articleIndex > 1) {
        scrollToDiv(--articleIndex);
    }
} else {
    if (articleIndex < $('article.dienst-wrapper').length) {
        scrollToDiv(++articleIndex);
    }
}
```

如果文章容器中有一些其他元素，上面的代码将不起作用。然后您可以按照以下步骤操作：

在任何函数之外声明一些变量，例如：
```
var articleIndex = 0;
```
获取文章集合到一个数组（仍然在任何函数之外）：
```
var articlesCollection = $('article.dienst-wrapper');
```

然后将函数重命名为：

function scrollToDiv(articleIndex) {...}

更改您的 "locatie" 变量如下：

var locatie = articlesCollection[articleIndex];

在函数中，检测滚动的地方，检查它是向下滚动还是向上滚动（我不知道你是怎么做到的，所以我跳过了这部分代码），然后用 increased 触发函数或减少 articleIndex，但请记住避免低于 1 和高于文章数量，代码应类似于以下内容：
```
//inside scroll listener function
if (scroll up) {
    if (articleIndex > 0) {
        scrollToDiv(--articleIndex);
    }
} else {
    if (articleIndex < articlesCollection.length - 1) {
        scrollToDiv(++articleIndex);
    }
}
```

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

How do I scroll to the next article with the same class ON SCROLL

html

jquery

scroll

mousewheel