• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

110
Vistas
Drag-scrolling vertical con inercia

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) }
about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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) }
about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda