Auf einer Internetseite soll automatisch ein längeres Inhaltselement von oben nach durchlaufen und am Ende wieder nach oben springen, nur um dann von vorn zu beginnen. Zwei Lösungsansätze für Javascript und Angular.

1. Javascript

Zunächst bauen wir das Setting auf. Die Box wird via CSS auf eine feste Größe beschränkt und anschließend mit sehr viel Inhalt befüllt:

<style>
.border {
    margin: 10px;
    height: 300px;
    width: 200px;
    border: 1px solid #000;
    overflow: hidden;
 }
 </style>

<div class="border" id="scrollarea">
Zwei flinke Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.  
</div>

Nun bringen wir mit Javascript etwas Bewegung in die Sache:

<script type="text/javascript"> 
var myVar = setInterval(function(){ myScroller() }, 50);
function myScroller() {
  document.getElementById("scrollarea").scrollTop += 1;
} 
</script>

Zunächst definieren wir ein Intervall, das die Funktion „myscroller()“ alle 50 Millisekunden aufruft. Die Funktion selbst schiebt bei jedem Aufruf mit der „scrollTop()“-Methode den Inhalt um einen Pixel nach oben. Durch das flotte Intervall scrollt der Text recht smart durch die Box. Am Ende bleibt die Box jedoch stehen. Daher ergänzen wir die Funktion um eine Abfrage, wann das Textende erreicht ist und springen dann zurück auf 0:

if(document.getElementById("scrollarea").scrollTop + document.getElementById("scrollarea").clientHeight == document.getElementById("scrollarea").scrollHeight) {
 document.getElementById("scrollarea").scrollTop = 0;
 } else {
 document.getElementById("scrollarea").scrollTop += 1;
 }

2. Angular

Nun soll das gleich Problem mit Angular gelöst werden. Hierfür benötigen wir wieder ein Inhaltselement, das im Template eingerichtet wird:

<div id="scrollarea" #scrollMe>
[...]
</div>

In der Komponente selbst werden „AfterViewChecked“, „ElementRef“ und „ViewChild“ aus „@angular/core“ sowie „Observable“, „Subscription“ und „Scheduler “ aus „rxjs/Rx“ importiert:

import { [...], AfterViewChecked, ElementRef, ViewChild } from '@angular/core';
import { [...], Observable, Subscription, Scheduler } from 'rxjs/Rx';

Die Klasse „TemplateComponent“ wird um „AfterViewChecked“ erweitert und der zu scrollende HTML-Container registriert:

export class TemplateComponent implements [...], AfterViewChecked {
 @ViewChild('scrollMe') private myScrollContainer: ElementRef;
[...]

Jetzt geht es wieder zur Animation. Meine ersten Versuche mit „Observable.timer()“ zeigten ein Fehlverhalten, da nach einer gewissen Zeit die Scrollbewegung schneller und schneller wurde. Unter Benutzung von „Observable.range()“ hingegen bekommen wir ein sauberes Verhalten hin:

 ngAfterViewChecked() {
 let updateTimer = Observable.range(50, 500, Scheduler.animationFrame);
 updateTimer.subscribe(t => {
 if(this.myScrollContainer.nativeElement.scrollTop + this.myScrollContainer.nativeElement.clientHeight >= this.myScrollContainer.nativeElement.scrollHeight) {
 y = this.myScrollContainer.nativeElement.scrollTop = 0;
 } else {
 y = this.myScrollContainer.nativeElement.scrollTop += 1;
 }
 });
 }