Obtuve desplazamiento vertical arrastrando hacia arriba/abajo con el mouse para trabajar en mi página web. Sin embargo, el problema es que se siente bastante abrupto porque el desplazamiento se detiene instantáneamente cuando deja de arrastrar. Me gustaría agregar algo de inercia para que continúe desplazándose un poco después de que dejes de arrastrar hasta que se detenga.
Esto es algo complicado de implementar, así que me gustaría un poco de ayuda. Este es mi todo mi código actual:
let newScrollY = 0 let element = null const dragScroll = (enabled) => { element?.removeEventListener("mousedown", element?.mouseDownFunc, false) window.removeEventListener("mouseup", element?.mouseUpFunc, false) window.removeEventListener("mousemove", element?.mouseMoveFunc, false) element = document.querySelector(".drag") if (!element || !enabled) return let lastClientY = 0 let mouseDown = false element.addEventListener("mousedown", element.mouseDownFunc = (event) => { event.preventDefault() mouseDown = true lastClientY = event.clientY }, false) window.addEventListener("mouseup", element.mouseUpFunc = (event) => { mouseDown = false }, false) window.addEventListener("mousemove", element.mouseMoveFunc = (event) => { if (!mouseDown) return let scrollElement = element if (element == document.body) scrollElement = document.documentElement newScrollY = event.clientY - lastClientY lastClientY = event.clientY scrollElement.scrollTop -= newScrollY }, false) }He descubierto una solución. La clave era usar el valor absoluto de la velocidad y sumar o restar al scrollTop según el signo de la velocidad (indicando si se desplazaban hacia arriba o hacia abajo).
let newScrollY = 0 let lastScrollTop = 0 let element = null as any let inertia = false let mouseDown = false const dragScroll = (enabled) => { if (inertia || mouseDown) return element?.removeEventListener("mousedown", element?.mouseDownFunc, false) window.removeEventListener("mouseup", element?.mouseUpFunc, false) window.removeEventListener("mousemove", element?.mouseMoveFunc, false) element = document.querySelector(".drag") if (!element || !enabled) return let lastClientY = 0 mouseDown = false let time = null let id = 0 element.addEventListener("mousedown", element.mouseDownFunc = (event) => { event.preventDefault() mouseDown = true inertia = false time = new Date() lastClientY = event.clientY let scrollElement = element if (element == document.body) scrollElement = document.documentElement lastScrollTop = scrollElement.scrollTop cancelAnimationFrame(id) }, false) window.addEventListener("mouseup", element.mouseUpFunc = (event) => { mouseDown = false const timeDiff = (new Date() as any - time) let scrollElement = element if (element == document.body) scrollElement = document.documentElement let speedY = (scrollElement.scrollTop - lastScrollTop) / timeDiff * 20 let speedYAbsolute = Math.abs(speedY) const draw = () => { let scrollElement = element if (element == document.body) scrollElement = document.documentElement if (speedYAbsolute > 0) { if (speedY > 0) { scrollElement.scrollTop += speedYAbsolute-- } else { scrollElement.scrollTop -= speedYAbsolute-- } } else { inertia = false } id = requestAnimationFrame(draw) } inertia = true draw() }, false) window.addEventListener("mousemove", element.mouseMoveFunc = (event) => { if (!mouseDown) return let scrollElement = element if (element == document.body) scrollElement = document.documentElement newScrollY = event.clientY - lastClientY lastClientY = event.clientY scrollElement.scrollTop -= newScrollY }, false) }