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

Question

I am trying to let users automatically scroll to the next article when they use their mousewheel. The follow code DOES work, however, it only scrolls to the next article ONCE. See the following image:

Also, I disabled overflow so that users can't scroll manually

I have the following code:

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

How can I fix this? Thanks!!

Answer 1

If you have your articles in some container, where is no other elements but articles with class "dienst-wrapper" you can follow this steps:

1. Declare some variable outside of any function for example:

   var articleIndex = 1;
   

2. Then rename your function to:

   function scrollToDiv(articleIndex) {...}
   

3. Change your "locatie" variable as below:

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

4. In function, where you detect scroll, check if it is scroll down or scroll up (I don't know how you do it so I skip code for this) and then fire function with increased or decreased articleIndex, but remember to avoid go below 1 and upper than amount of articles, code should look similar to this:

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

If you have some other elements inside articles container upper code would not work. Then you can follow this steps:

1. Declare some variable outside of any function for example:

   var articleIndex = 0;
   

2. Get collection of articles to an array (still outside of any function):

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

3. Then rename your function to:

   function scrollToDiv(articleIndex) {...}
   

4. Change your "locatie" variable as below:

   var locatie = articlesCollection[articleIndex];
   

5. In function, where you detect scroll, check if it is scroll down or scroll up (I don't know how you do it so I skip code for this) and then fire function with increased or decreased articleIndex, but remember to avoid go below 1 and upper than amount of articles, code should look similar to this:

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