JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar">
    <div class="scrollContainer scroll">
        <ul>
            <li>Odkaz</li>
            <li>Odkaz</li>
            <li>Odkaz</li>
        </ul>
    </div>
</div>

CSS

/*Kontejner, který nám drží obsah absolutně pozicovaného prvku*/
.scrollContainer {
    height: 100%;
    overflow-y: scroll;
}

/*Tam, kam chcete aplikovat scrollbar musíte přidat třídu .scroll*/
.scroll { overflow-y: hidden !important; }
.scroll:hover { overflow-y: scroll !important; }

/*Nastavení scrollbaru*/
.scroll::-webkit-scrollbar { width: 9px; }

.scroll::-webkit-scrollbar-track {
    -webkit-border-radius:5px;
    border-radius:5px;
    background-color: rgba(0,0,0,0.2);
}

.scroll::-webkit-scrollbar-thumb {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.2);
}

.scroll::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.4); }
.scroll::-webkit-scrollbar-thumb:window-inactive { background:rgba(0,0,0,0.05); }



#sidebar {
    width: 200px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: Grey;
    overflow-y: hidden;
    padding: 5px;
}

ul { list-style-type: none; }
li { height: 300px; }