如何在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;
}