Horizontal Scroll Native

scroll.js

function nativeHorizontalScroll( id ) {
    var elID = id;
    var element = document.getElementById( id );
    var scrolling = false;
    var initialX  = 0;

    function getParent( node, id ) {
        if ( node.id === id ) {
            return node;
        }

        if ( ! node.parentElement ) {
            return null;
        }

        return getParent( node.parentElement, id );
    }

    function scroll( initial, changed ) {
        var diff          = (-1.25) * ( changed - initial );
        var currentScroll = element.scrollLeft;
        var maxScroll     = element.scrollWidth - element.clientWidth;

        if ( currentScroll === 0 && diff < 0 ) {
            return;
        }

        currentScroll = currentScroll + diff;

        if ( currentScroll < 0 ) {
            currentScroll = 0;
        }

        if ( currentScroll > maxScroll ) {
            currentScroll = maxScroll;
        }

        initialX = changed;

        element.scroll( currentScroll, element.scrollTop );
    }

    function disableSelect(event) {
        event.preventDefault();
    }

    addEventListener("mousemove", (event) => {
        if ( ! scrolling ) {
            return;
        }
        window.addEventListener('selectstart', disableSelect);
        scroll( initialX, event.clientX );

    });

    addEventListener("mouseup", (event) => {
        if ( scrolling ) {
            window.removeEventListener('selectstart', disableSelect);
            scrolling = false;
        }
    })

    addEventListener("mousedown", (event) => {
        var target = event.target || event.originalTarget;

        if ( ! getParent( target, elID ) ) {
            return;
        }

        scrolling = true;
        initialX  = event.clientX;
    });
}