Для получения полного доступа
зарегистрируйтесь.
Сниппет,  JavaScript

Добавляем кастомный скроллбар в стиле MacOS, iOS


Задача была следующей, сделать красивую полосу прокрутки для кода сниппетов. В MacOS, полоса прокрутки очень минималистична и красиво вписывается в наш интерфейс. Но, в Windows и других OS, полоса прокрутки выглядет везде по разному. Поэтому было решено заменить системный скроллбар на свой.

Долго искать не пришлось, выбор пал на PerfectScrollbar который очень просто используется. Для начала демо того что получилось:

89f82efb23d7643ffb367b9adf801611.gif

Создаём элемент в котором у нас будет прокрутка, например:

<div class="block">Содержимое блока</div>

Необходимо добавить следующие свойства в стиль элемента:

.block {
    height: 100px;
    
    position:relative;  
    overflow: hidden;
}

Высота у вас будет своя.

Мы используем плагин perfect-scrollbar.jquery.js, необходимо подключить его и jQuery. После этого, добавим js-код для работы плагина:

$('.block').perfectScrollbar();
  jquery ui плагин jquery библиотеки perfectScrollbar

Автор


dfatt
  • Репутация: 260
  • Сниппеты : 53
  • Ревизии : 7
Подписаться

Чтобы увидеть комментарии, нужно быть участником сообщества

Регистрация