Fixed header for drawer
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.