Streaming live at 10am (PST)

Dragable Side Scroll

Hi there,

I was wondering if anyone could help me to make my horizontal content scroll by clicking and dragging the content with a mouse. It already works natively on mobile touch but I would like to be able to do it on desktop as my scroll bar is very thin.

The Google store has a good example of this - https://store.google.com/gb/?hl=en-GB

Here is a link to my site - Webflow - NMJ Service Centre

Many thanks in advance.

Adam.

I seem to have manged to get it to scroll when you click and drag between the blue boxes. But it breaks when I click on a link block to drag. I’m don’t really know java script so any help would be much appreciated. :slight_smile:

Live website - https://nmj-service-centre.webflow.io/

Read only link - Webflow - NMJ Service CentrePreformatted text

And this is the code I am using.

    <script>document.addEventListener('DOMContentLoaded', function() {
    const ele = document.getElementById('makesservicingslider');
    ele.style.cursor = 'grab';

    let pos = { top: 0, left: 0, x: 0, y: 0 };

    const mouseDownHandler = function(e) {
        ele.style.cursor = 'grabbing';
        ele.style.userSelect = 'none';

        pos = {
            left: ele.scrollLeft,
            top: ele.scrollTop,
            // Get the current mouse position
            x: e.clientX,
            y: e.clientY,
        };

        document.addEventListener('mousemove', mouseMoveHandler);
        document.addEventListener('mouseup', mouseUpHandler);
    };

    const mouseMoveHandler = function(e) {
        // How far the mouse has been moved
        const dx = e.clientX - pos.x;
        const dy = e.clientY - pos.y;

        // Scroll the element
        ele.scrollTop = pos.top - dy;
        ele.scrollLeft = pos.left - dx;
    };

    const mouseUpHandler = function() {
        ele.style.cursor = 'grab';
        ele.style.removeProperty('user-select');

        document.removeEventListener('mousemove', mouseMoveHandler);
        document.removeEventListener('mouseup', mouseUpHandler);
    };

    // Attach the handler
    ele.addEventListener('mousedown', mouseDownHandler);
});</script>