The scrollbar style and behavior of any html element can be customized using css and/or the paScrollableContainer directive provided in SharedModule .

paScrollableContainer directive:

Applied to a container, the directive will add the appropriate css classes following these rules:

• pa-scrollable-container class is added to the container and set the property overflow-y .
• pa-scrolling class is added when user scrolls the container.
• pa-fading-scrollbar class is added in the absence of scroll event during 1.5 sec.
• pa-scrolling and o-fading-scrollbar classes are removed in the absence of scroll event during 3 sec.

Available css tokens:

• $scrollbar-width-mobile : 12px by default.
• $scrollbar-width-desktop : 24px by default.
• $color-scrollbar-thumb-active : color used while the user is scrolling and the scrollbar is visible.
• $color-scrollbar-thumb-border : color used for the 'space' around the scrollbar-thumb (transparent cannot be used).
• $color-scrollbar-thumb-fading : color used as a transition after scrolling and before hiding the scrollbar.

Available css classes:

• pa-scrollable-container set the property overflow-y on this container.
• pa-scrollable : scrollbar is hidden (transparent) in this container.
• pa-scrolling : scrollbar is visible with active color.
• pa-fading-scrollbar : scrollbar is visible with fading color.