Как сделать полосу прокрутки для сайта Html+ Css

HTML

<div class="scrollable">
<p>Это длинный текст, который не помещается в блок.</p>
<p>Это длинный текст, который не помещается в блок.</p>
<p>Это длинный текст, который не помещается в блок.</p>
</div>

CSS

.scrollable {
width: 300px;
height: 200px;
overflow: auto;
}

/* Полоса прокрутки */
::-webkit-scrollbar {
width: 10px;
}

/* Дорожка */
::-webkit-scrollbar-track {
background: #f1f1f1;
}

/* Бегунок */
::-webkit-scrollbar-thumb {
background: red;
}

Делаешь блок и переполняешь его но ограничиваешь высоту и встилях пишешь overflow-y auto

Она автоматически появится когда контент не будет влезать

Ее делает браузер.