Desplazamiento suave para screencasts

Supongamos que desea desplazarse una página web de arriba a abajo mediante programación. Por ejemplo, estás grabando un screencast y quieres un bonito desplazamiento de página completa. Probablemente no puedas desplazarte tú mismo porque estará todo desigual y entrecortado. El nativo de JavaScript puede realizar un desplazamiento fluido. Aquí hay un pequeño fragmento que podría serle útil:

window.scrollTo({  top: document.body.getBoundingClientRect().height,  behavior: 'smooth'});

¡Pero no hay manera de controlar la velocidad o la atenuación de eso! Es probable que sea demasiado rápido para una captura de pantalla. Sin embargo, encontré un pequeño truco, publicado originalmente por (creo) Jedidiah Hurt.

El truco consiste en utilizar transformaciones CSS en lugar del desplazamiento real. De esta manera se puede controlar tanto la velocidad como la relajación. Aquí está el código que limpió un poco:

const scrollElement = (element, scrollPosition, duration) = {    // useful while testing to re-run it a bunch.  // element.removeAttribute("style");     const style = element.style;  style.transition = duration + 's';  style.transitionTimingFunction = 'ease-in-out';  style.transform = 'translate3d(0, ' + -scrollPosition + 'px, 0)';}scrollElement(  document.body,   (    document.body.getBoundingClientRect().height    -    document.documentElement.clientHeight    +    25  ),  5);

La idea es transformar una posición superior negativa para la altura de todo el documento, pero restablecer la altura de lo que puedes ver para que no se desplace demasiado. Hay un pequeño número mágico ahí que quizás tengas que ajustar para que sea perfecto para ti.

Aquí hay una película que grabé de esa manera:

Ver una demostración

Otra posibilidad es un poco de moda jQuery .animate(), que se puede ampliar con alguna flexibilización personalizada. Aquí hay una demostración de eso.