如何在 Angular 应用程序中自定义滚动条

Question

我想为整个应用程序自定义滚动条。这意味着我想更改滚动条上的默认浏览器外观。在我的 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>

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

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

Answer 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;
}