Make unused X and Y scrollbar container elements invisible to pointer events

[Theunsgk]

Feature Description

Make inactive X and Y scrollbar ng-scrollbar-sticky elements ignore all pointer events using pointer-events: none.

Use Case

At the moment these elements are in the way all the time, even if the contents are not scrollable currently. What this means is that on small contents, the elements are taking up significant clickable space, even though they dont do anything when clicked/hovered.

Please see below images:

[MurhafSousli]

If content is not scrollable, it will not render the scrollbar in the first place! I am not sure what options did you use! did you try appearance="native" or visibility="visible" ?

Anyway, The attributes isverticallyscrollable="false" and ishorizontallyscrollable="false" is set on the scrollbar component, so you can use them to set pointer-events: none for each scrollbar in your global stylesheet.

ng-scrollbar[isVerticallyScrollable="false"], ng-scrollbar[isHorizontallyScrollable="false"] {
  .ng-scrollbar-sticky {
     pointer-events: none;
  }
}

[Theunsgk]

Thank you for the response, I see now that when I use visibility="native" or visibility="hover", the problem does not arise. It is only with visibility="visible". Is this an intended feature with visibility="visible"? It feels unnecessary to have the bars be blocking content behind it if theres nothing to scroll (even when I want it to render all the time when it is scrollable)?

Thank you for the solution as wel, I have implemented it and it works perfectly.