Option to stick scrollable container elements to left/right edge on scroll

As I've created more advanced layouts for the Touch Bar, there have been times where I want certain interface elements always on screen, but I don't always want them on the left or right - I want them inside the scrollable container, and I want them to stick to the left or right edge if I scroll beyond their original positions, sort of like how iOS handles alphabetical list headers sticking to the top of the scrollview, except horizontally in this case.

This can be useful for a number of things, including how Apple uses it to delineate list sections in the native macOS emoji picker. But it would also enable me to hide extraneous controls when the use scrolls, freeing up a lot of screen real estate.

For example, right now my expanded Now Playing widget looks like this:

When you scroll, you get this:

But what would be ideal is if all those media buttons were actually in the scrollable container, because I only want to show the primary media controls on scroll and collapse the rest, like so:

Look how much room there is now! In this case, the prev/next/play buttons scroll along with everything else until they hit the left edge. So you could scroll the opposite direction to reveal the other controls again.

Is this possible?

EDIT: Also, I'm aware that Apple's implementation only supports a single item being docked on the edge at a time, and only on one edge. In this case I want more than one item docked to the edge, and I do think only allowing items to be docked to one edge at a time is the correct behavior (because it indicates the container's scroll direction).

Unfortunately this would be pretty complicated to implement but I'll look into it, maybe there is some easy way I don't know of yet.