时间戳

首页 > 解决方案 > 如何隐藏 Angular 组件中的默认浏览器滚动条？

css - 如何隐藏 Angular 组件中的默认浏览器滚动条？

问题描述

我想出了如何在 Angular 应用程序中全局隐藏滚动条，但我在实际项目中遇到了一个场景，我需要在单个 Angular 组件中隐藏默认滚动条，但在其他组件中可以看到默认滚动条。::host 似乎没有解决这个问题。如果有人知道如何解决这个问题，我将非常感谢您的反馈！另外，如果可能的话，我会喜欢 CSS 解决方案，因为我觉得不应该有任何疯狂的解决方案或黑客来解决这个问题。我在下面做了一个快速的stackblitz...

https://stackblitz.com/edit/angular-ivy-syr7do?file=src/styles.css

标签： cssangulargoogle-chromefirefoxscrollbar

解决方案

用这个

*::-webkit-scrollbar {
  width: 0px !important;
  background-color: white !important;
}

*::-webkit-scrollbar-thumb {
  width: 0px !important;
  background-color: whitesmoke !important;
  border-radius: 0px !important;
}

*::-webkit-scrollbar:horizontal {
  width: 0px !important;
  background-color: white !important;
}

*::-webkit-scrollbar-thumb:horizontal {
  width: 0px !important;
  background-color: whitesmoke !important;
  border-radius: 0px;
}

*如果需要，请替换为特定的类/ID。

不要忘记添加overflow:auto

推荐阅读