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

Posted 2023-02-22

【中文标题】如何在 Angular 组件中隐藏默认浏览器滚动条？

【英文标题】：How to hide the default browser scrollbar in an Angular component?

【发布时间】：2021-10-17 09:02:50

【问题描述】：

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

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

【参考方案1】：

用于在正文中全局隐藏滚动条

body::-webkit-scrollbar 
    display: none;

在您的 CSS 文件中。

并且在其他组件中使用自定义滚动条，您只需将内容包装在一个容器中并设置您的自定义滚动条。

这是demo。

【参考方案2】：

试试这个：

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar 
  display: none;


/* Hide scrollbar for Internet explorer and Edge */
.example 
  -ms-overflow-style: none;

【讨论】：

我试图在组件本身而不是全局隐藏整个测试组件的默认滚动条，而不仅仅是单个类/id

【参考方案3】：

使用这个

*::-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

【讨论】：

我想从 angular 组件中隐藏滚动条，而不是从全局 styles.css 中隐藏。作为这个解释，您可以在 styles.css 文件中使用，但不能在测试组件 css 文件中使用。

我已经提到喜欢用全局选择器替换类/id

请检查 stackblitz。我在您给我的测试组件中实现了该代码，并且仍然出现默认滚动条

stackblitz.com/edit/angular-ivy-5ucaua 立即查看。我做了一些小改动

我试图隐藏组件本身的默认滚动条，而不是在你的分叉堆栈闪电战中的内容类或我的堆栈闪电战中的段落标签中，而不是在全局样式中。希望有帮助。由于某种原因::webkit-scrollbar 在测试组件 css 本身中不起作用