Styling -webkit-scrollbar to be shorter than the height of the container?

Question

I'm trying to style up the scrollbar so that it's positioned inside the scrollable area (container with scrollbar), effectively with margin just on the top & bottom of the bar itself.

In the example image, notice how the text flows past the bar, and how the image is positioned above it. Is this achievable?

Note: I'm aware the browser support for these things isn't the greatest, most likely will just have to use a polyfill for a bit.

Edit to clarify one thing: If the user were to scroll down on the example, the text should be visible up to the top edge of the image, if that wasn't clear.

Answer 1

For anyone else who needs this answer:

main::-webkit-scrollbar-button:start,
main::-webkit-scrollbar-button:end {
    height: 6vh;
}