Wie scrolle ich in angular2 mit den Tasten?

Question

Wenn ich eine div 300x300 habe, zusätzlich zu einer Bildlaufleiste, wenn der Inhalt die Höhe der Box überschreitet (so dass vertikale Bildlaufleiste angezeigt wird) (Überlauf: auto), möchte ich eine Schaltfläche haben, die an der Unterseite der angezeigt wird Box, die sagt "Seite nach unten" und eine Taste, die auf der Oberseite der Box, die sagt "Bild nach oben" angezeigt wird, wird "virtuell Bildlauf", als ob der Benutzer auf die Bildlaufleiste basierend auf die Höhe eines div geklickt hatte.

Ich möchte, dass dies für divs verwendbar ist. Was ist ein guter Weg, dies zu implementieren? Ist dies eine Anweisung, muss für jede Komponente ein doppelter Code hinzugefügt werden?

Answer 1

Es gibt Custom scroll angular directives. Ich denke, du könntest es auch an spezifischere Zwecke anpassen.

Ich verwendete einmal ng2-slimscroll und es enthält 1 nur Direktive Ich denke, dass Sie bearbeiten konnten, um eine Funktion hinzuzufügen und den Knopf zu verwalten, den Sie Aktion wünschen.

Sie werden feststellen, dass es Javascript gemeinsame Funktionen verwendet, um Scroll-Höhe und so weiter zu berechnen. Hier ein Beispiel für die Funktion, mit der barHeight berechnet wird. Sie finden sie in ihrem github-Projektordner. ng2-slimscroll/src/directives/slimscroll.directive.ts

getBarHeight(): void { 
    setTimeout(() => { 
     let barHeight = Math.max((this.el.offsetHeight/this.el.scrollHeight) * this.el.offsetHeight, 30) + 'px'; 
     let display = parseInt(barHeight, 10) === this.el.offsetHeight ? 'none' : 'block'; 

     this.renderer.setElementStyle(this.bar, 'height', barHeight); 
     this.renderer.setElementStyle(this.bar, 'display', display); 
     this.renderer.setElementStyle(this.grid, 'display', display); 
    }, 1); 
}