ボタンを使ってangular2でスクロールする方法は？

Question

div 300x300の場合は、コンテンツがボックスの高さを超えている場合（スクロールバーが表示されるように）スクロールバーに加えて（オーバーフロー：自動）、ボタンの下に「ページダウン」と表示されるボックスと、ユーザーがdivの高さに基づいてスクロールバーをクリックしたかのように「仮想的にスクロールする」「ページアップ」と表示されるボックスの上部に貼られたボタンが表示されます。

divに使用できるようにしたいと思います。これを実装する良い方法は何ですか？これはディレクティブで、コンポーネントごとに重複したコードを追加する必要がありますか？

Answer 1

Custom scroll angular directivesが存在します。私はあなたがより具体的な目的にカスタマイズすることもできると思います。

私はかつてng2-slimscroll使用し、それは私はあなたが機能を追加し、アクションをしたいボタンを管理するために編集できると思います1つののみディレクティブが含まれています。

あなたはその上で、スクロール高さを計算するためにはJavaScript共通機能を使用している気づくとなります。ここでは、barHeightの計算に使用する関数のサンプルを示します。 githubプロジェクトフォルダにあります。 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); 
}