How to display the sticky element over the scrollbar?

I have the following code to display a sticky title bar and scrollable content underneath it

    &__categories{
    max-height: 75vh;
    overflow-y: scroll;
    .titlebar{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 2rem;
        border-radius: 0.5rem 0.5rem 0 0;
        font-size: 1.8rem;
        background-color: $color-primary;
        height: 6.4rem;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 2;
    }
}

However, the scrollbar is visible over the titlebar. I want the scrollbar to be under the scrollbar. My aim is to remove the margin that is visible on the right side of the titlebar. How can I fix it?