Fixed header for drawer

From gitlab-org/gitlab-ui!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 inspecting scrollTop 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 gitlab-org/gitlab-ui#1777 (comment 957058854)). At the moment that's achieved with position: sticky, but .gl-drawer could simply be a flex container, and the header would naturally be fixed to the top.