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