宽度自定义后角度滚动条始终可见

Question

Angular 中滚动条的默认行为是仅在滚动期间可见。我是

.scroll-element {
  &::-webkit-scrollbar {
    width: 4px; 
  }
  &::-webkit-scrollbar-thumb {
    background-color: $light-blue-pls;
    opacity: 0.8;
    border-radius: 13px;
  }
}

问题是由 width 属性引起的，它改变了默认行为，导致滚动条始终可见。 目标是为滚动条设置自定义宽度，同时仅在滚动期间保持可见性的默认行为。

有人可以指导我如何实现这一目标吗？任何帮助将不胜感激！

非常感谢！

Answer 1

不幸的是，CSS 本身并没有提供直接的方法来检测滚动活动以切换滚动条可见性。

但是，你可以通过使用 Angular 的事件绑定来实现类似的效果：

• 设置滚动条样式： 您已经使用 CSS 设置了滚动条样式。滚动发生时保留这些样式。

• 检测 Angular 中的滚动： 使用 Angular 的事件绑定来检测用户何时在元素内滚动。当检测到滚动时，您可以向元素添加一个类以使滚动条可见。 （提示：使用@HostListener('window:scroll', ['$event']))

• 滚动时切换类： 根据显示或隐藏滚动条的滚动事件添加和删除类。