angular2에서 버튼을 사용하여 가짜 스크롤하는 방법은 무엇입니까?

Question

div 300x300이있는 경우 내용이 상자의 높이를 초과하면 스크롤 막대뿐만 아니라 (세로 스크롤 막대가 표시되도록) (오버플로 : 자동), 아래쪽에 붙어있는 단추가 나타납니다. 상자에 "Page Down"이라고 표시된 상자와 사용자가 div의 높이를 기준으로 스크롤 막대를 클릭 한 것처럼 "페이지 위로 스크롤"하는 상자 위쪽에 붙어있는 것으로 나타나는 단추가 표시됩니다.

div에 사용할 수 있기를 바랍니다. 이것을 구현하는 좋은 방법은 무엇입니까? 이 지시문은 각 구성 요소에 중복 코드를 추가해야합니까?

Answer 1

Custom scroll angular directives이 있습니다. 나는 또한 당신이 그것의 특정한 목적에 맞게 조정할 수 있다고 생각한다.

한번만 사용하면 ng2-slimscroll이며 1 개의 지시어 만 포함되어 있습니다. 기능을 추가하고 동작을 원하는 버튼을 관리 할 수 ​​있다고 생각합니다.

자바 스크립트의 일반적인 기능을 사용하여 스크롤 높이를 계산하는 것을 볼 수 있습니다. 다음은 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); 
}