高度为百分比时，设计滚动条的方案

背景：项目需要设计一个滚动条翻页，但由于页面的高度是指定且不变，在设置它的overflow-y为scroll的时候也不显示滚动条，所以设计了一个假的滚动条。

<div #pagingBar class="pagingBar" (scroll)="onScroll($event)" style="width:10px;overflow-y: scroll; overflow-x:hidden;height:calc(100vh - 67px);">
      <p #pagingp style="width:1px;height:10000px">
    </div>
           

@ViewChild('pagingp', { static: false }) pagingp: ElementRef
    @ViewChild('pagingBar', { static: false }) pagingBar: ElementRef;
    scrollTerms: Subject<string> = new Subject<string>();
    onScroll(e: any) {
        this.scrollTerms.next(e); //加入防抖队列
    }
        this.scrollTerms
            .pipe(debounceTime(200))
            .subscribe(term => {
                let page = 1;
                let scrollTop = this.pagingBar.nativeElement.scrollTop;
                if (scrollTop > this.eachScrollLen) {
                    page = Math.ceil(scrollTop / this.eachScrollLen);
                }
                //跳转到指定页逻辑

            });

           

设置滚动滑块的背景色

.pagingBar::-webkit-scrollbar-thumb:hover{
    background: #5A5B5C;
  }
  
  .pagingBar::-webkit-scrollbar-thumb:active{
    background: #3A3B3C;
  }
           

滚动条滑块的高度设置，因为不知道怎么获取滑块的dom，弄了个取巧的方式，根据页数去设置pagingp的高度

public set pages(value: number) {
        this._pages = value;

        let clientHeight = this.pagingBar.nativeElement.clientHeight;//可见高度、内容实际高度 + 上下内边距
    
        this.pagingp.nativeElement.style.height = clientHeight * this._pages + 'px';
        if (value == 1) {
            this.pagingBar.nativeElement.style.overflowY = 'hidden';
        }
        else {
            this.pagingBar.nativeElement.style.overflowY = 'scroll';
        }
    }