Иногда вы можете обнаружить, что устали от уродливых полос прокрутки браузера при ежедневном просмотре сайтов. К счастью в настоящее время любому программисту или веб-дизайнеру доступно множество готовых инструментов, позволяющих изменить полосы прокрутки и сделать их поистине уникальными и красивыми. Мы подготовили для вас подборку лучших библиотек JavaScript, которые можно использовать для замены и улучшения собственных полос прокрутки при разработке сайтов.

React-scrollbars-custom

К достоинствам данной библиотеки можно отнести собственное поведение прокрутки браузера – оно не имитирует прокрутку, показывает только настраиваемые полосы прокрутки, сама прокрутка все еще родная.

Библиотека поддерживает кроссбраузерность и кроссплатформенность – неважно, где и как будет открыта страница, полосы прокрутки везде будут выглядеть одинаково. Также для её работы никаких дополнительных таблиц стилей не требуется.

к содержанию ↑

Gemini-scrollbar

gemini-scrollbar – добавляет пользовательские оверлейные полосы прокрутки с собственным механизмом прокрутки. Это еще одна библиотека, которая при небольшом размере и легкости настройки, поможет вам создавать кастомные полосы прокрутки и подгонять их под дизайн ваших страниц.

к содержанию ↑

Smooth-scrollbar

smooth-scrollbar – это библиотека на JavaScript, используемая для создания настраиваемой, производительной полосы прокрутки с эффектами плавной прокрутки для перемещения содержимого страницы.

к содержанию ↑

Vuescroll

Vuescroll – это плагин полосы прокрутки, основанный на Vue.js 2.X, он очень прост в использовании, без сложных настроек, и каждый параметр имеет значение по умолчанию (это означает, что вам даже не нужно прописывать какую-либо конфигурацию). Просто оберните содержимое в <vue-scroll>и появится настраиваемая полоса прокрутки.

к содержанию ↑

SimpleBar

SimpleBar – это простая автономная библиотека JavaScript, которая добавляет настраиваемую полосу прокрутки к любому прокручиваемому контейнеру с содержимым. Работает со свойством CSS overflow: auto и сохраняет собственное поведение прокрутки.

к содержанию ↑

Malihu

malihu – это плагин jQuery, который позволяет украсить полосу прокрутки содержимого с помощью CSS и пользовательского интерфейса jQuery. В данный пакет входит набор различных полосок скроллинка, и их установка не займет у вас много времени.

к содержанию ↑

OverlayScrollbars


OverlayScrollbars – это библиотека JavaScript, используемая для создания элегантных, настраиваемых и тематических полосок прокрутки на любых прокручиваемых элементах.

к содержанию ↑

Slim-scroll

Slim-scroll – это плагин на чистом JavaScript, который заменяет встроенную полосу прокрутки браузера на полосу, которую можно легко настроить с помощью CSS.

к содержанию ↑

SimpleScrollbar

Простая, легкая, совместимая с ES6 ванильная библиотека JavaScript для создания настраиваемой полосы прокрутки на прокручиваемом содержимом при наведении курсора мыши.

к содержанию ↑

Perfect-scrollbar

perfect-scrollbar – это небольшая библиотека, написанная полностью на JavaScript. С её помощью вы сможете делать стильные полоски прокрутки, видоизменяя их по своему желанию. Для изменения полосок вы можете использовать как уже готовые варианты CSS, так и создать свои.

к содержанию ↑

Baron

Baron – небольшая, быстрая и кроссбраузерная настраиваемая полоса прокрутки с собственной механикой прокрутки системы. Если вам нужно быстрое и легкое решение – то эта библиотека для вас.

к содержанию ↑

NanoScroller.js

nanoScroller.js – это плагин jQuery, который предлагает простой способ реализации полос прокрутки. Он копирует стиль Mac OS X Lion и приносит его на ваши страницы. Он использует минимальную разметку HTML  .nano > .nano-content. Другие элементы div полосы прокрутки .pane > .nano-slider реализуются при загрузке страницы, что позволяет упорядочить содержимое шаблона. В последней версии была реализована встроенная прокрутка и совместимость с iPad, iPhone и некоторыми планшетами на Android.

к содержанию ↑

FakeScroll

Небольшая библиотека с уже предустановленными стилями, и небольшими возможностями изменений.

Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне

Об авторе

Web Developer. Имею экспертизу в таких вещах как FrontEnd, Backend, Devops. PHP, Python, Javascript (Vue.js, React.js)

Смотреть посты