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 -

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

Many thanks in advance.


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 -

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'); = 'grab';

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

    const mouseDownHandler = function(e) { = 'grabbing'; = '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 = - dy;
        ele.scrollLeft = pos.left - dx;

    const mouseUpHandler = function() { = 'grab';'user-select');

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

    // Attach the handler
    ele.addEventListener('mousedown', mouseDownHandler);