fake scrolling

HTML

<div class="slider">
	<div class="slider__wrapper">
		<div class="slider__items">
			<div class="slider__item"><img src="https://dummyimage.com/600x400/9e089e/ffffff.png&text=1" /></div>
			<div class="slider__item"><img src="https://dummyimage.com/600x400/9e089e/ffffff.png&text=2" /></div>
			<div class="slider__item"><img src="https://dummyimage.com/600x400/9e089e/ffffff.png&text=3" /></div>
			<div class="slider__item"><img src="https://dummyimage.com/600x400/9e089e/ffffff.png&text=4" /></div>
			<div class="slider__item"><img src="https://dummyimage.com/600x400/9e089e/ffffff.png&text=5" /></div>
			<div class="slider__item"><img src="https://dummyimage.com/600x400/9e089e/ffffff.png&text=6" /></div>
		</div>
	</div>
</div>

SCSS

.slider {
	overflow: hidden;
	
	&__wrapper {
		overflow-x: scroll;
		overflow-y: hidden;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 100px;
		margin-bottom: -100px;
		scroll-snap-type: x mandatory;
		scroll-padding: 0;
	}
	
	&__items {
		white-space: nowrap;
		font-size: 0;
	}
	
	&__item {
		display: inline-block;
		font-size: 1rem;
		white-space: normal;
		scroll-snap-align: start;
    
    img {
      pointer-events: none;
    }
	}
}

JavaScript

var items = document.querySelector(".slider__items");
var dragging;
var x;
var scrollLeft;

items.addEventListener("mousedown", function (event) {
	if (!dragging) {
		dragStart(event.clientX);
	}
});

items.addEventListener("mouseup", function (event) {
	if (dragging) {
		dragEnd(event.clientX);
	}
});

function drag (event) {
	event.stopPropagation();
	event.preventDefault();
	console.log("drag", scrollLeft, event.clientX - x);
	items.style.transform = `translateX(${event.clientX - x}px)`;
  return false;
}

function dragStart (clientX) {
	dragging = true;
	x = clientX;
	({ scrollLeft } = items.parentNode);
	items.addEventListener("mousemove", drag);
}

function dragEnd (clientX) {
	dragging = false;
	items.style.transform = "";
	console.log("dragEnd", scrollLeft, scrollLeft - (clientX - x));
	items.parentNode.scrollLeft = scrollLeft - (clientX - x);
	items.removeEventListener("mousemove", drag);
}