Desplazamiento suave para screencasts

Supongamos que desea desplazar 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 desplazarlo tú mismo porque estará todo desigual y entrecortado. JavaScript nativo 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 un screencast. 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 restar 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.