Как сделать скроллбар js

Обновлено: 04.07.2024

Введение и использование подключаемого модуля стиля полосы прокрутки пользовательской веб-страницы jQuery mCustomScrollbar

Как использовать mCustomScrollbar

Сначала загрузите предоставленный автором пакет плагинов, который содержит все файлы плагинов и некоторые примеры. Следующие четыре файла должны быть загружены на ваш сервер: jquery.mCustomScrollbar.js, jquery.mousewheel.min.js, jquery.mCustomScrollbar.css и mCSB buttons.jpg 。_

Шаг 1: Загрузите файл стиля плагина.

Вы можете использовать следующий код для импорта файла таблицы стилей jquery.mCustomScrollbar.css в пакет подключаемого модуля.

Вы можете разместить этот код в нижней части документа, чтобы сократить время загрузки веб-контента, причину также можно увидеть в статье, представленной выше. Загруженный здесь код использует службу ускорения CDN от Google для получения пользовательского интерфейса jQuery и jQuery, что имеет свои преимущества и недостатки. В пакет подключаемого модуля включены jQuery и jQuery UI (этот интерфейс был оптимизирован автором, включая необходимые модули для этого подключаемого модуля, а размер составляет всего 43 КБ). Конечно, вы можете загрузить эти две библиотеки в пакете плагина к серверу для использования. Они находятся в каталоге jquery пакета плагина. Если вы используете службы ускорения распространенных библиотек Javascript, таких как Google или Sina, более рекомендуется следующее (возьмите Google в качестве примера):

Если вы напишете это, он вынесет решение после загрузки библиотеки: ** Если библиотека не загружена успешно, то создается новый ссылочный код Javascript для ссылки на локальный файл **. Таким образом, если внешняя библиотека не может быть использована, локальная библиотека будет загружена, не приводя к невозможности использования подключаемого модуля. Этот способ написания рекомендуется. ** Шаг 3. Активируйте этот плагин для блока контента **

Здесь я использовал (function ($) <. >) (jQuery); для обертывания кода jQuery, чтобы избежать конфликтов между jQuery и другими библиотеками. Я также использовал загрузку окна ($ (window) .load ()), чтобы активировать функцию моего плагина, потому что таким образом я могу гарантировать, что мой плагин будет загружен после загрузки всех объектов страницы. Конечно, вы также можете использовать обычный метод загрузки кода jQuery, но вы должны понимать разницу между методами ready и load. Общий метод загрузки кода jQuery выглядит следующим образом:

** Шаг 4: Добавление содержимого и стилей на страницу ** Без содержимого, конечно, нельзя упомянуть эффект этого плагина. Что касается приведенного выше примера кода, мы должны определить блок содержимого с классом содержимого на странице. И добавьте тестовые данные:

Конечно, это еще не конец. ** Настройте стиль полосы прокрутки, вы должны отобразить полосу прокрутки **. Поэтому мы должны добавить в этот блок немного CSS, чтобы он отображался полосами прокрутки, иначе это не будет иметь никакого эффекта. Добавленный стиль очень прост, то есть определить ширину или высоту или и ширину и высоту, а затем определить значение переполнения как auto. Поэтому, если содержимое превышает указанную ширину и высоту, появится полоса прокрутки. пример:

mCustomScrollbar метод

update

Вызовите метод обновления функции mCustomScrollbar для обновления полосы прокрутки в реальном времени при изменении содержимого (например, с помощьюJavaScriptДобавить или удалить объект, вставить новый контент через ajax, скрыть или отобразить новый контент и т. Д.)

Плагин позволяющий кастомизировать стандартный скроллбар.

Perfect-scrollbar никак не влияет на стиль оригинального скроллбара, он разработан так, что не имеет ширины или высоты.
Позиционируется либо справа, либо внизу контейнера.
Можно изменить практически все CSS стили для полосы прокрутки. Дизайн скроллбара не зависит от скрипта.
Поддерживается функция "update" и используются "scrollTop" и "scrollLeft", а не абсолютное позиционирование или что-то ещё.
Прекрасная поддержка RTL в браузерных движках WebKit и Gecko.

Чтобы плагин работал идеально, нужно соблюсти ряд требований, но ничего страшного в них нет.

Следующие требования уже включены в CSS плагина, так что будьте внимательны, если будете его менять:

Сегодня имею большое желание написать вам статью от ом как заменить стандартную полосу прокрутки на сайте на более стилизованную. Иногда так бывает что заменить скроллбар просто необходимо для определенного завершения дизайна страницы. Если вы занимаетесь версткой и часто верстаете лендинги, то такой шаг в сторону улучшения внешнего вида страницы, может вам отлично помочь.

Стандартная полоса прокрутки в принципе ничем не мешает, но тем неимение ее можно немного доработать. тот способ что я покажу может не только изменить прокрутку, но и придать ей определенную анимацию, замедлить скроллинг и тд. Так же данная прокрутка может иметь любой внешний вид, у нее имеется много стилей и при желании сможете все их опробовать, но об этом позже. То что получится в итоге можно посмотреть по ссылке ниже.

Приступим до воплощения такой доработки. Так как наш скрипт полосы прокрутки использует jQuery, нужна эта самая библиотека jQuery. Ее нужно подключить к сайту. Если библиотека была ранее подключена на сайте, то этот шаг можно пропустить, если нет, то нужно ознакомится с статьей Как и где подключить скрипт?. Строка с ссылкой на библиотеку:

Далее вам понадобится подключить сам скрипт. Его вы можете взять из архива который скачаете по ссылке выше. Файл со скриптом называется custom_scrollbar.min.js. В статье что я рекомендовал есть примеры, как подключать файлы со скриптами. делать это следует после библиотеки.

Чтобы запустить наш скрипт и параллельно задать настройки прокрутке, нужно добавить еще один небольшой скрипт:

В данном примере есть только одна настройка - указана тема оформления dark-3. Тем у данной прокрутки много. Можете указать любую. Все их можно взять из списка ниже или из файла стилей, об этом позже. В общем, просто копируете название и добавляете в скрипт выше.

light
dark
light-2
dark-2
light-thick
dark-thick
light-thin
dark-thin
rounded
rounded-dark
rounded-dots
rounded-dots-dark
3d
3d-dark
3d-thick
3d-thick-dark
minimal
minimal-dark
light-3
dark-3
inset
inset-dark
inset-2
inset-2-dark
inset-3
inset-3-dark

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

Есть такой параметр как scrollInertia. Он задает скорость анимации прокрутки. В примере, что был вверху статьи, при прокрутке ощущается задержка, плавность. Это сделано для придания необычности рядовой полосе прокрутки. В примере установлено значение 3000. В итоге, код будет таким:

Чтобы все темы оформления и вообще полоса прокрутки отображалась правильно нужно подключать стили CSS. Если вы не особо хотите заморачиваться, то просто подключайте файл стилей, что так же лежит в скачанном вами архиве и называется - custom_scrollbar.css. Если же заморочится, то из него можно взять только основные моменты. Общие стили и стили определенной темы оформления. остальное попросту не подключать, ведь это лишние строки кода и просто так, сайту они не нужны.

Так же у вас на сайте должны будут установлены определенные стили. Чаще всего они и так будут установлены, но вдруг это не так, то добавьте их себе.

Если все сделано правильно и ваша страница на сайте имеет большую высоту, чтобы появилась прокрутка, то все должно работать. Теперь можете применять ее на своих проектах и радовать себя и заказчиков необычным решением.

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты :)

Дизайн системного скроллбара способен изуродовать значительную часть сайтов интернета.

Доброго времени суток!

Хочу немножко покопаться в окрестностях данной темы.

На момент написания статьи, более или менее гибко кастомизировать скроллбар средствами CSS можно только в браузерах на движке webkit.

Сразу пример:
Пропишем несколько строк и откроем страницу в том же chrome:

В остальном это попытки большого числа js-библиотек, более половины которых подменяют нативный механизм скролла. При таком подходе возникает сразу два фундаментальных недостатка: отсутствие кроссбраузерности и отсутствие же кроссплатформенности.

Когда-то я использовал jScrollPane. На тот момент плагин вполне справлялся со своей задачей, но сейчас понимаю, что на странице генерируется куча мусора, которую сложно контролировать.

Вообще, все подобные решения - УЖаС, по этому лучше закройте эту статью и призывайте всех перейти на лучший браузер в мире.

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

Поставим задачу (а это пол дела!):

Скрыть системный скроллбар

Отобразить кастомный скроллбар.

Все должно быть максимально просто и понятно, а подключение не требует дополнительных махинаций

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

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

Я опишу идею, которая может быть будет кому-то полезна в велосипедостроении :)

Все, что нам осталось, это вызвать makeThis для нашего ul

Обработку touchstart, touchmove, touchup можно посмотреть в коде примера ниже или написать самостоятельно по аналогии :)

Читайте также: