【问题标题】:How to customize scroll bar in Angular application如何在 Angular 应用程序中自定义滚动条
【发布时间】:2021-12-11 05:31:27
【问题描述】:

我想为整个应用程序自定义滚动条。这意味着我想更改滚动条上的默认浏览器外观。在我的 styles.scss 文件中,我尝试过,但滚动条没有任何区别:

::-webkit-scrollbar {
   //changes
}

html::-webkit-scrollbar {
  //changes
}

body::-webkit-scrollbar {
  //changes
}

::ng-deep ::-webkit-scrollbar {
  //changes
}

app.component.html:

<app-shell>
   <main>
       <router-outlet></router-outlet>
   </main>
</app-shell>

shell.component.html:

<nav>
<!-- navbar here -->
</nav>

<main>
    <ng-content></ng-content>
</main>

我对滚动条有什么误解吗?如何更改应用周围的浏览器默认滚动条?

更新:即使页面上没有可滚动的内容,右侧也有白色滚动条。

【问题讨论】:

    标签: html css angular scrollbar


    【解决方案1】:

    这些代码行我已经用过很多次了:

    ::-webkit-scrollbar {
       width: 0; /* Remove scrollbar space */
       background: transparent; /* Optional: just make scrollbar invisible */
    }
    
    ::-webkit-scrollbar-thumb {
       background: #FF0000;
    }
    

    他们在很多情况下都为我工作。

    尝试使用!important 或指定滚动条在其中呈现的 div(在某些情况下我需要这样做)

    .your-div-selector::-webkit-scrollbar {
       width: 0; /* Remove scrollbar space */
       background: transparent; /* Optional: just make scrollbar invisible */
    }
    
    .your-div-selector::-webkit-scrollbar-thumb {
       background: #FF0000;
    }
    

    【讨论】:

    • 我尝试添加 !important 但它没有改变任何东西。为了将更改应用到整个应用,我应该指定哪个 div?
    • 尝试类似:div::-webkite-scrollbar { ... } 这允许将该样式添加到每个 div。但我认为您可能需要为每个具有特定选择器的可滚动 div 执行此操作
    • 我试过 div.class-name::webkit-scrollbar { ... } 但没有任何区别。我测试了 div.class-name 选择器,所以选择器是正确的,但它不会影响滚动条。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-10-14
    • 2013-07-02
    • 2013-08-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-11-13
    相关资源
    最近更新 更多