I'm looking to find a way to be able to replace the default scrolling method for mobile devices of a website.

Tried to implement this code, but it fires every time there is a single swipe (which the scrolling to div also contains and therefore triggers again and again).

Thank you for any help!

    var timer = null;
window.addEventListener('scroll', function() {
    if(timer !== null) {
        clearTimeout(timer);        
    }
    timer = setTimeout(function() {
          // do something
    }, 150);
}, false);

  var lastScrollTop = 0;
  $(window).scroll(function(event){
  var st = $(this).scrollTop();

  if (st > lastScrollTop){
     // downscroll code
     console.log('down')

     var $target = $(".archive-blog-posts-wrapper.active").prev(".archive-blog-posts-wrapper");
     if ($target.length == 0) $target = $(".archive-blog-posts-wrapper:first");

     $("html, body").animate(
       {
         scrollTop: $target.offset().top,
       },
       "slow"
     );

     $(".active").removeClass("active");
     $target.addClass("active");
     
     
  } else {
    // upscroll code
    console.log('up')

    var $target = $(".archive-blog-posts-wrapper.active").next(".archive-blog-posts-wrapper");
    if ($target.length == 0) $target = $(".archive-blog-posts-wrapper:first");

    $("html, body").animate(
      {
        scrollTop: $target.offset().top,
      },
      "slow"
    );

    $(".active").removeClass("active");
    $target.addClass("active");
  }
  lastScrollTop = st;
  });