Dragable Side Scroll

Design help Custom code
1

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.

image
image970×640 54.6 KB

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

image
image1728×454 91.1 KB

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

Many thanks in advance.

Adam.

2

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 - https://preview.webflow.com/preview/nmj-service-centre?utm_medium=preview_link&utm_source=designer&utm_content=nmj-service-centre&preview=d1f6d176a3c6553a6b702247d916473e&workflow=preview`Preformatted 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>