Mouse mechanics on scroll

25 Views Asked by At

So I currently have a horizontal scroll site I am working on with a progress bar at the bottom. The scroll works fine and looks smooth when I use my macbook touchpad or my apple magic mouse but when i use a lenovo mouse with a wheel on it, the scroll is very snappy and inconsistent. Any ideas on how to fix this?

$(document).ready(function () {
  const totalSlides = $("section").length;
  let isAnimating = false;
  let allowSlideChange = true;
  let lastScrollPosition = 0;

  function updateProgressBar(scrollPosition) {
      const progress = (scrollPosition / ((totalSlides - 1) * window.innerWidth)) * 100;
      $("#progressBar").css("width", progress + "%");
      $("#progressText").text(Math.round(progress) + "%");
  }

  $(window).on("wheel", function (e) {
      e.preventDefault();
      if (!allowSlideChange || isAnimating) return;

      const delta = Math.abs(e.originalEvent.deltaY) > Math.abs(e.originalEvent.deltaX) ? e.originalEvent.deltaY : e.originalEvent.deltaX;
      const scrollPosition = lastScrollPosition + delta;

      $("html, body").stop().animate(
          {
              scrollLeft: scrollPosition,
          },
          {
              // duration: 1000,
              easing: "linear",
              step: function (now, fx) {
                  if (fx.prop === "scrollLeft") {
                      updateProgressBar(now);
                      lastScrollPosition = now;
                  }
              },
              complete: function () {
                  isAnimating = false;
              },
          }
      );
  });

  $(window).scroll(function () {
      if (!isAnimating) {
          const scrollPosition = $(this).scrollLeft();
          updateProgressBar(scrollPosition);
      }
  });
});
0

There are 0 best solutions below