<style>

.horizontale > div > div > div > div > div {
flex: 0 0 auto;
padding: 18px;/*add the padding here to space the elements*/
width: 256px; /*adjust this value to be the same as the width you wrote in custom positioning*/
}

.horizontale > div > div {
display: flex!important;
flex-wrap: nowrap!important;
overflow-x: scroll!important;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
margin-right: -10px;
min-height: 300px;
cursor: grab;
}

.horizontale > div > div::-webkit-scrollbar{
height: 4px;
}

.horizontale > div > div::-webkit-scrollbar-track{
background: rgba(0, 0, 0, 0.1);
}

.horizontale > div > div::-webkit-scrollbar-thumb{
background: rgba(0, 0, 0, 0.31);
}

.horizontale > div > div.active {
cursor: grabbing;
cursor: -webkit-grabbing;
transform: scale(.98);
}

.noclick{
pointer-events: none;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function(event) {
const horizons = document.querySelectorAll('.horizontale > div > div');
let isDown = false;
let startX;
let scrollLeft;

horizons.forEach(horizon => {

const links = horizon.querySelectorAll('div > div > div');
horizon.addEventListener('mousedown', (e) => {
isDown = true;
horizon.classList.add('active');
startX = e.pageX - horizon.offsetLeft;
scrollLeft = horizon.scrollLeft;
});
horizon.addEventListener('mouseleave', () => {
isDown = false;
horizon.classList.remove('active');
for (var i = 0; i < links.length; i++) {
links[i].classList.remove('noclick');
}
});
horizon.addEventListener('mouseup', () => {
isDown = false;
horizon.classList.remove('active');
for (var i = 0; i < links.length; i++) {
links[i].classList.remove('noclick');
}
});
horizon.addEventListener('mousemove', (e) => {
if(!isDown) return;
e.preventDefault();
const x = e.pageX - horizon.offsetLeft;
const walk = (x - startX) * 1.6 ;
horizon.scrollLeft = scrollLeft - walk;
for (var i = 0; i < links.length; i++) {
links[i].classList.add('noclick');
}
});
});
});
</script>