Horizontal scrolling on a specified element with mouse wheel

a-horizMouseScroll.js

/**
 * This function enables horizontal scrolling on a specified element when the mouse wheel is used.
 * @param {string} selector - The CSS selector of the element on which to enable horizontal scrolling.
 * @param {number} scrollValue - The amount to scroll each time the mouse wheel is used. Defaults to 100.
 * @param {number} extraScroll - The number of times to allow scrolling past the end of the element. Defaults to 5.
 * @returns {void}
 */
export let horizMouseScroll = (
    selector,
    scrollValue = 100,
    extraScroll = 5,
) => {
    const scrollContainer = document.querySelector(selector);
    if (!scrollContainer)
        return console.error(`No element found for selector "${selector}"`);

    let scrollCount = 0;

    scrollContainer.addEventListener("wheel", (evt) => {
        const scrollAmount = evt.deltaY > 0 ? scrollValue : -scrollValue;
        scrollContainer.scrollLeft += scrollAmount;

        if (
            scrollContainer.scrollWidth -
                scrollContainer.scrollLeft -
                scrollContainer.clientWidth >
                0 &&
            scrollContainer.scrollLeft > 0
        ) {
            evt.preventDefault();
            scrollCount = 0;
        } else {
            scrollCount++;
            if (scrollCount < extraScroll) {
                evt.preventDefault();
            }
        }
    });
};

b-example.js

// Other imports
import { horizMouseScroll } from "./horizMouseScroll";

window.horizMouseScroll = horizMouseScroll;

c-example-tailwindcss.html

<div id="courses-carousel" class="flex lg:flex-nowrap snap-x snap-proximity relative overflow-x-scroll">

  <!-- long list of stuff -->
  
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        horizMouseScroll('#courses-carousel', 200, 10);
    });
</script>