Итак, давайте разбираться. Напишем простейший html.

HTML

<div class="block">
Далеко-далеко, за словесными горами в стране гласных и согласных живут рыбные тексты. Пояс послушавшись скатился ее продолжил то собрал гор, над большой запятой имеет запятых алфавит, своих переулка силуэт, там это инициал диких безорфографичный. Переулка это домах ручеек, пунктуация речью свой даже оксмокс страна знаках пор. Переписали страна заманивший власти скатился, своих большой рот вопрос всемогущая? Свое пор раз великий страна жизни это города, свой домах агентство lorem если имеет обеспечивает вопроса пунктуация диких первую имени правилами собрал ведущими. Однажды за грамматики переписывается своего свой своих наш даже, текстами которое он ты города всемогущая обеспечивает вопроса но продолжил от всех, рекламных подзаголовок дал!
Далеко-далеко за словесными горами, в стране гласных и согласных живут рыбные тексты. Реторический, он переулка текста своих снова, языком текстами пустился заголовок единственное ipsum пор взгляд безорфографичный ему не, сбить коварный свой. Ручеек рот рекламных заглавных скатился однажды встретил наш силуэт обеспечивает взобравшись повстречался заголовок, знаках его! Предупреждал продолжил заглавных возвращайся дорогу страну сбить текст встретил подпоясал. Родного пояс от всех что необходимыми семь ipsum проектах обеспечивает страна вопрос снова переулка живет свой власти, собрал одна текстов выйти своих подзаголовок взгляд. Свой пунктуация составитель эта сих пояс точках даль текст образ буквоград заголовок, собрал, рукописи даже взобравшись взгляд имеет предупредила раз ему вдали?
</div>

Обычный див с классом.

CSS

.block {
max-width: 400px;
max-height: 400px;
margin-bottom: 30px;
}

Также просто стилизуем блок. Обязательно задать max-height, иначе скролл просто не отработает.

JS

Подключаем файлы плагина, скачав их по ссылке https://github.com/Grsmto/simplebar и пишем код для инициализации:

document.querySelectorAll('.block').forEach(el => {
new SimpleBar(el)
});

Здесь мы написали код, чтобы на любой класс .block навешивался скролл. Если нужен на один элемент - ищите через querySelector. Также можно просто добавить атрибут data-simplebar для нужного элемента и все.

А теперь давайте застилизуем скролл:

CSS (для скролла)

.simplebar-track.simplebar-vertical {
background-color: #d9d9d9;
width: 5px;
}

.simplebar-content-wrapper {
padding-right: 15px;
}

.simplebar-scrollbar::before {
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 1;
background-color: #2871c5;
border-radius: 0;
}

.simplebar-track.simplebar-vertical .simplebar-scrollbar::before {
top: 0;
bottom: 0;
}

.simplebar-scrollbar.simplebar-visible::before {
opacity: 1;
}

В общем-то и все. Плагин простой как две копейки, и этим он прекрасен. Если статьи мало - посмотрите видео в самом верху поста)

Удачи!