Иногда вы можете обнаружить, что устали от уродливых полос прокрутки браузера при ежедневном просмотре сайтов. К счастью в настоящее время любому программисту или веб-дизайнеру доступно множество готовых инструментов, позволяющих изменить полосы прокрутки и сделать их поистине уникальными и красивыми. Мы подготовили для вас подборку лучших библиотек JavaScript, которые можно использовать для замены и улучшения собственных полос прокрутки при разработке сайтов.
к содержанию ↑К достоинствам данной библиотеки можно отнести собственное поведение прокрутки браузера — оно не имитирует прокрутку, показывает только настраиваемые полосы прокрутки, сама прокрутка все еще родная.
Библиотека поддерживает кроссбраузерность и кроссплатформенность — неважно, где и как будет открыта страница, полосы прокрутки везде будут выглядеть одинаково. Также для её работы никаких дополнительных таблиц стилей не требуется.
gemini-scrollbar – добавляет пользовательские оверлейные полосы прокрутки с собственным механизмом прокрутки. Это еще одна библиотека, которая при небольшом размере и легкости настройки, поможет вам создавать кастомные полосы прокрутки и подгонять их под дизайн ваших страниц.
smooth-scrollbar — это библиотека на JavaScript, используемая для создания настраиваемой, производительной полосы прокрутки с эффектами плавной прокрутки для перемещения содержимого страницы.
Vuescroll — это плагин полосы прокрутки, основанный на Vue.js 2.X, он очень прост в использовании, без сложных настроек, и каждый параметр имеет значение по умолчанию (это означает, что вам даже не нужно прописывать какую-либо конфигурацию). Просто оберните содержимое в <vue-scroll>и появится настраиваемая полоса прокрутки.
SimpleBar — это простая автономная библиотека JavaScript, которая добавляет настраиваемую полосу прокрутки к любому прокручиваемому контейнеру с содержимым. Работает со свойством CSS overflow: auto и сохраняет собственное поведение прокрутки.
malihu — это плагин jQuery, который позволяет украсить полосу прокрутки содержимого с помощью CSS и пользовательского интерфейса jQuery. В данный пакет входит набор различных полосок скроллинка, и их установка не займет у вас много времени.
OverlayScrollbars — это библиотека JavaScript, используемая для создания элегантных, настраиваемых и тематических полосок прокрутки на любых прокручиваемых элементах.
Slim-scroll — это плагин на чистом JavaScript, который заменяет встроенную полосу прокрутки браузера на полосу, которую можно легко настроить с помощью CSS.
Простая, легкая, совместимая с ES6 ванильная библиотека JavaScript для создания настраиваемой полосы прокрутки на прокручиваемом содержимом при наведении курсора мыши.
perfect-scrollbar — это небольшая библиотека, написанная полностью на JavaScript. С её помощью вы сможете делать стильные полоски прокрутки, видоизменяя их по своему желанию. Для изменения полосок вы можете использовать как уже готовые варианты CSS, так и создать свои.
Baron — небольшая, быстрая и кроссбраузерная настраиваемая полоса прокрутки с собственной механикой прокрутки системы. Если вам нужно быстрое и легкое решение – то эта библиотека для вас.
nanoScroller.js — это плагин jQuery, который предлагает простой способ реализации полос прокрутки. Он копирует стиль Mac OS X Lion и приносит его на ваши страницы. Он использует минимальную разметку HTML .nano > .nano-content. Другие элементы div полосы прокрутки .pane > .nano-slider реализуются при загрузке страницы, что позволяет упорядочить содержимое шаблона. В последней версии была реализована встроенная прокрутка и совместимость с iPad, iPhone и некоторыми планшетами на Android.
Небольшая библиотека с уже предустановленными стилями, и небольшими возможностями изменений.
p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне
Получение первого заказа на фрилансе может быть вызовом, особенно для новичков, которые еще не имеют…
Разработка сайтов и веб-приложений стала в наше время неизбежной потребностью. Тем не менее, существует несколько способов…
Компании и специалисты по маркетингу тратят много времени и денег на изучение языка поисковых систем,…
Адаптивные изображения - это набор методов, используемых для загрузки правильного изображения в зависимости от разрешения…
Политика конфиденциальности - это документ, в котором подробно описывается, как компания или организация обрабатывает любую…
В современном мире много специалистов занятых поддержанием работы сайтов, и довольно часто многих из них…
Смотреть комментарии
стилизуемся по полной