I am changing translate value and incrementing it, but it seems that the value is incrementing like : - 0, -5, -10, -15, -20 because I have multiplied the difference of the mouse moved and the actual mouse position, so my question is, how can I make the speed of increment faster without multiplying it, like 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15?
Here is the example code: https://jsfiddle.net/dy1vk40f/1/
scrollcontainer.addEventListener('mousemove', (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX;
const style = window.getComputedStyle(scrollcontainer);
const matrix = new WebKitCSSMatrix(style.transform);
const walk = x - startX; // startX MEANS THE POSITION MOUSE IS CLICKED for dragging
scrollcontainer.style.userSelect = 'none';
scrollcontainer.style.transform = `translate3d(${matrix.m41 + (walk * 5)}px, 0px, 0px)`;
startX = e.pageX;
});