Sanftes Scrollen für Screencasts

Nehmen wir an, Sie möchten eine Webseite programmatisch von oben nach unten scrollen. Zum Beispiel, wenn Sie gerade einen Screencast aufnehmen und einen schönen Full-Page-Scroll wünschen. Sie können ihn wahrscheinlich nicht selbst scrollen, da er uneben und ruckelig sein wird. Natives JavaScript kann sanftes Scrollen. Hier ist ein winziger Ausschnitt, der für Sie funktionieren könnte

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

Aber es gibt keine Möglichkeit, die Geschwindigkeit oder die Ease-Funktion davon zu steuern! Es wird wahrscheinlich viel zu schnell für einen Screencast sein. Ich habe jedoch einen kleinen Trick gefunden, ursprünglich veröffentlicht von (glaube ich) Jedidiah Hurt.

Der Trick besteht darin, CSS-Transforms anstelle von tatsächlichem Scrollen zu verwenden. So können sowohl Geschwindigkeit als auch Ease-Funktion gesteuert werden. Hier ist der Code, den ich ein wenig aufgeräumt habe

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
);

Die Idee ist, eine negative Top-Position für die Höhe des gesamten Dokuments zu transformieren, aber die Höhe dessen, was Sie sehen können, abzuziehen, damit es nicht zu weit scrollt. Dort gibt es eine kleine magische Zahl, die Sie möglicherweise anpassen müssen, um es für Sie genau richtig zu machen.

Hier ist ein Film, den ich auf diese Weise aufgenommen habe

Es ist immer noch nicht perfekt glatt. Ich gebe teilweise der Bildrate des Videos die Schuld, aber selbst als ich es mit meinen Augen beim Aufnehmen beobachtet habe, war es keine totale Butter. Wenn ich noch höhere Qualität benötigen würde, würde ich wahrscheinlich meinen Computer neu starten und diese Seite als einzigen geöffneten Tab und die einzige geöffnete Anwendung haben, lolz.

Demo ansehen

Eine weitere Möglichkeit ist ein kleines, gutes altes jQuery .animate(), das mit benutzerdefinierten Ease-Funktionen erweitert werden kann. Hier ist eine Demo davon.

Sehen Sie den Pen
jQuery Smooth Scrolling mit Ease-Funktion von Chris Coyier (@chriscoyier)
auf CodePen.