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

最新推荐文章于 2025-03-17 17:58:34 发布

Jacky-Liu999

最新推荐文章于 2025-03-17 17:58:34 发布

阅读量1.5k

点赞数

分类专栏： Angular 文章标签： angular 滚动条高度指定百分比

本文链接：https://blog.youkuaiyun.com/hotboyboy/article/details/106418381

版权

Angular 专栏收录该内容

25 篇文章

订阅专栏

项目中遇到页面高度固定且需要滚动条翻页的问题。由于常规方法无法显示滚动条，采用了一种创新方式设计假的滚动条。具体实现包括设定滚动条滑块的背景颜色，以及通过页数来动态设置滑块的高度，从而达到模拟滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：项目需要设计一个滚动条翻页，但由于页面的高度是指定且不变，在设置它的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';
        }
    }