Артём Мáлков

Кроссбраузерная стилизация полосы прокрутки (ScrollBar) на jQuery

10 авг5 коммАртём Мáлков

Знаю, что многим стандартная полоса прокрутки на сайте не нравится – скучная, не вписывается в общую стилистику сайта. Сегодня же я покажу, как с помощью небольшой библиотеки jQuery под названием «Nicescroll» можно исправить положение.

1. Первым делом скачайте архив в конце статьи и содержимое, загрузите на ваш сайт по FTP.

2. Далее в шаблоне вашего сайта, перед закрывающим тегом </body>, подключите скрипты:

<script src="/jquery.nicescroll.js"></script>

<script>

	$(document).ready(function() {

		var nice = $("html").niceScroll();

	});

</script> 

Не забудьте изменить адрес до скрипта согласно иерархии файлов на вашем сайте.

Вот, собственно, и все. Если захотите изменить размер, цвет и другие параметры скролла – присваивайте все стили классу «.nicescroll-rails div», например:

.nicescroll-rails div { 
	background: red !important; 
}  

Стилизация скролла работает в браузерах FireFox, Opera, IE, в браузерах на движке Chromium (Амиго, Яндекс.Браузер, Google Chrome и прочие) и других.

Файл
Размер
Ссылка
nicescroll.zip
23,85 Kb
Скачать с сервера
Рекомендуем к просмотру
Четыре красивых эффекта падающего снега на jQuery/JavaScript/CSS3
Модули и скрипты
Как вставить HTML, CSS и JS в PHP-код?
Статьи и советы
Как правильно подключить JS- и PHP-скрипты к вашему сайту?
Статьи и советы
5
комментариев
Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 2
    766
      •  Гости
    22 апр в 16:49

    Очень классно выглядит но верно сайт дребезжит (дрожит) при прокрутке, это проблема ( Может дело в конфликте скрипта он весьма большой

    • 6
    1083
      •  Команда Pandoge
    7 дек в 20:09

    Николай, это не сжатая версия, чтобы вы могли сами покопаться в плагине. В сжатом же виде она весит порядка 60 кб, что вполне не плохо, по моему.

    • 2
    766
      •  Гости
    7 дек в 16:49

    Ничего себе небольшая, больше 100кб. Попробуйте найти подобный плагин тяжелее. Непонятна зачем нужна поддержка таких динозавров как IE 6-8 в 2017 году.

    • 6
    1083
      •  Команда Pandoge
    24 окт в 21:09

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

    • 2
    766
      •  Гости
    24 окт в 16:56

    Спасибо, получилось, но не совсем, т.к. сайт "дрожит" при прокрутке. Отключаю скрипт, сайт нормально прокручивается. Как это можно устранить?

Подняться наверх
Регистрация на сайте
Pandoge - уникальный проект, который собрал на своих страницах большой опыт многих людей в сфере сайтостроения.Присоединяйся и ты к сообществу, получай неограниченные знания и начинай творить свою мечту!Нажимая кнопку «Регистрация» вы даете согласие на обработку своих персональных данных.
Имя и фамилия
E-mail
Логин
Пароль
Регистрация
Pandoge