Create scroll scrim directive or component
Scroll scrim indicates to the user with a subtle gradient that there's more content available via scrolling.
Several components may want to have such affordance, so creating a shared directive (or component, though a directive is probably more flexible for this use case) that they can all use would help.
From !2919 (comment 1018979224):
I think we're likely to want to implement a scroll scrim in more than just the drawer component. Any time there's an area with scrollable content, we may want a scroll scrim.
Rather than implementing that independently for each component, it would be great to have it encapsulated in either a directive (or a component). This is the sort of API I have in mind:
<div class="gl-drawer-header">...</div> <div v-scrim class="gl-drawer-body">...</div> <div class="gl-drawer-footer">...</div>
You'd simply add
v-scrim
to whatever scrollable container you want, and it would automatically add gradient(s) to the appropriate edges as the scroll position changes. It could even take arguments specifying which edges to add the scrim to.I know the implementation you've written here is more performant (no
scroll
event listener, no inspectingscrollTop
etc), but I think using throttling +passive: true
should be fast enough.For this to work, the layout for the drawer would have to change such that the
gl-drawer-body
is the scrollable container, and not the parent.gl-drawer
. I think this would make sense anyway, since the drawer header is supposed to always remain fixed to the top when scrolling through content (also discussed in #1777 (comment 957058854)). At the moment that's achieved withposition: sticky
, but.gl-drawer
could simply be a flex container, and the header would naturally be fixed to the top.
Implementation plan
-
Implement the directive approximately described above -
Replace GlDrawer
's scrim implementation in !2919 (merged) with new directive