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. 
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>