Module «scroll-simplebar». Кастомный скролл на базе simplebar

Демо:

https://codepen.io/ildar-meyker/pen/ExdpNEY

Плагины:

https://jquery.com

http://grsmto.github.io/simplebar/

Подключение:

//

<link
            href="https://cdn.jsdelivr.net/npm/simplebar@6.2.5/dist/simplebar.min.css"
            rel="stylesheet"
        />

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/simplebar@6.2.5/dist/simplebar.min.js"></script>

Разметка:

//

<div class="scroll-simplebar">
    <div class="table-default">
        <table>
            <tr>
                <th>Марка</th>
                <th>Модель</th>
                <th>Двигатель</th>
                <th>Год выпуска</th>
            </tr>
            <tr>
                <td>KAMAZ</td>
                <td>6460</td>
                <td>11.76 / 10.85</td>
                <td>2000-н.в</td>
            </tr>
            <tr>
                <td>KAMAZ</td>
                <td>6460</td>
                <td>11.76 / 10.85</td>
                <td>2000-н.в</td>
            </tr>
            <tr>
                <td>KAMAZ</td>
                <td>6460</td>
                <td>11.76 / 10.85</td>
                <td>2000-н.в</td>
            </tr>
            <tr>
                <td>KAMAZ</td>
                <td>6460</td>
                <td>11.76 / 10.85</td>
                <td>2000-н.в</td>
            </tr>
            <tr>
                <td>KAMAZ</td>
                <td>6460</td>
                <td>11.76 / 10.85</td>
                <td>2000-н.в</td>
            </tr>
            <tr>
                <td>KAMAZ</td>
                <td>6460</td>
                <td>11.76 / 10.85</td>
                <td>2000-н.в</td>
            </tr>
            <tr>
                <td>KAMAZ</td>
                <td>6460</td>
                <td>11.76 / 10.85</td>
                <td>2000-н.в</td>
            </tr>
            <tr>
                <td>KAMAZ</td>
                <td>6460</td>
                <td>11.76 / 10.85</td>
                <td>2000-н.в</td>
            </tr>
            <tr>
                <td>KAMAZ</td>
                <td>6460</td>
                <td>11.76 / 10.85</td>
                <td>2000-н.в</td>
            </tr>
            <tr>
                <td>KAMAZ</td>
                <td>6460</td>
                <td>11.76 / 10.85</td>
                <td>2000-н.в</td>
            </tr>
            <tr>
                <td>KAMAZ</td>
                <td>6460</td>
                <td>11.76 / 10.85</td>
                <td>2000-н.в</td>
            </tr>
            <tr>
                <td>KAMAZ</td>
                <td>6460</td>
                <td>11.76 / 10.85</td>
                <td>2000-н.в</td>
            </tr>
            <tr>
                <td>KAMAZ</td>
                <td>6460</td>
                <td>11.76 / 10.85</td>
                <td>2000-н.в</td>
            </tr>
            <tr>
                <td>KAMAZ</td>
                <td>6460</td>
                <td>11.76 / 10.85</td>
                <td>2000-н.в</td>
            </tr>
            <tr>
                <td>KAMAZ</td>
                <td>6460</td>
                <td>11.76 / 10.85</td>
                <td>2000-н.в</td>
            </tr>
            <tr>
                <td>KAMAZ</td>
                <td>6460</td>
                <td>11.76 / 10.85</td>
                <td>2000-н.в</td>
            </tr>
            <tr>
                <td>KAMAZ</td>
                <td>6460</td>
                <td>11.76 / 10.85</td>
                <td>2000-н.в</td>
            </tr>
        </table>
    </div>
</div>

Стили:

//

// blocks/scroll-simplebar.scss
.scroll-simplebar {
    height: 520px;
    overflow: auto;
    border-radius: 0.8rem;
    background: #ffffff;
}

// fix-vendors/simplebar.scss
.simplebar-track.simplebar-vertical {
    width: 15px;
    border-radius: 0.8rem;
    background: #f8f8f8;
}

.simplebar-scrollbar:before {
    border-radius: 1rem;
    background: #204a8f;
}
.simplebar-scrollbar.simplebar-visible::before {
    opacity: 1;
}

Инициализация:

// modules/scroll-simplebar.js

$(function () {
    $(".scroll-simplebar").each(function () {
        new SimpleBar(this);
    });
});