Angular Scrollbar Always Visible After Width Customization

Question

The default behavior of the scrollbar in Angular is to be visible only during scrolling. I am

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

The issue arises from the width property, which alters the default behavior, causing the scrollbar to be constantly visible. Objective is to set a custom width for the scrollbar while maintaining the default behavior of visibility only during scrolling.

Could someone guide me on how to achieve this? Any help would be greatly appreciated!

Thank you so much!

Answer 1

Unfortunately, CSS alone doesn't provide a direct way to detect scrolling activity to toggle the scrollbar visibility.

However, you can achieve a similar effect by using Angular's event binding:

• Style the Scrollbar: You have already styled the scrollbar using CSS. Keep these styles for when the scrolling occurs.

• Detect Scrolling in Angular: Use Angular's event binding to detect when the user is scrolling within the element. When scrolling is detected, you can add a class to the element to make the scrollbar visible. (Hint: use @HostListener('window:scroll', ['$event']))

• Toggle Class on Scroll: Add and remove a class based on the scroll event that shows or hides the scrollbar.