Hello,
For scrollbar design in my applications, I use the following css:

.scrollList{
    height: 330px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.scrollStyle::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0);
    border-radius: 10px;
    background-color: #FFF;
}

.scrollStyle\:\:-webkit-scrollbar{
    width: 6px;
    background-color: #d2dae7;
    border-radius: 0px 6px 0px 0px;
}

.scrollStyle::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: rgba(0,0,0,0.3);
}

With this css, in my list, the scroll bar looks like this:

But with that css in hand, you can play around with the design.

Apply to the CSS of the screens you want to use.

I hope to help you.

Hello Josh,

Have you tried applying the scroll bar component to different containers. 

Attached you have quick test where I apply the component to the list and the pagination, and apply it also only to the list and it's working.

I'm using the Top Menu Theme

Thanks to you both.   I was able to get a better looking scrollbar using either solution.