Меняем внешний вид полосы прокрутки

Меняем внешний вид полос прокруткиКак вы знаете, в разных операционных системах, полосы прокрутки (скроллбары) имеют свой внешний вид и его никак нельзя изменить через CSS, по крайней мере кроссбраузерно.

Но что делать, если вам требуется поменять внешний вид полосы прокрутки? В этом нам поможет jQuery плагин Nicescroll, с его помощью мы легко сможем стилизовать скроллбары. О том, как это сделать, смотрите в видеоуроке.

Смотреть видеоурок

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

Настройки плагина:

  • cursorcolor - задает цвет полосы прокрутки (по умолчанию: "#000000")
  • cursoropacitymin - задает прозрачность полосы прокрутки, когда она не активна. Может принимать значения от 0 до 1 (по умолчанию: "0", т.е. полоса скрыта)
  • cursoropacitymax - задает прозрачность полосы прокрутки в активном состоянии. Может принимать значения от 0 до 1 (по умолчанию: "1", т.е. полоса видна полностью)
  • cursorwidth - задает ширину полосы прокрутки (по умолчанию: "5px")
  • cursorborder - задает рамку во круг полосы прокрутки (по умолчанию: "1px solid #fff")
  • cursorborderradius - задает радиус скругления углов полосы прокрутки (по умолчанию: "4px")
  • zindex - задает свойство z-index для DIV-блока, внутри которого находиться полоса прокрутки (по умолчанию: "9999")
  • scrollspeed - устанавливает скорость прокрутки (по умолчанию: "60")
  • mousescrollstep - устанавливает скорость прокрутки с помощью колесика мышки (по умолчанию: "40")
  • touchbehavior - задает возможно прокрутки контента с помощью курсора мыши, подобно тому, как это происходит на сенсорных устройствах (по умолчанию: false)
  • hwacceleration - использование аппаратного ускорения, если это возможно (по умолчанию: true)
  • boxzoom - разрешает использование функции увеличения масштаба (по умолчанию: false)
  • dblclickzoom - (только при установке boxzoom = true) активирует функцию увеличения масштаба при двойном клике по элементу (по умолчанию: true)
  • gesturezoom - (только при установке boxzoom = true и на сенсорных устройствах) активирует функцию увеличения масштаба при прикасании к блоку (по умолчанию: tru)e
  • grabcursorenabled - (только при touchbehavior = true) отображает курсор мыши в виде "хватающей руки" (по умолчанию: true)
  • autohidemode - дает возможность скрывать полосу прокрутки. Может принимать значения: "true" = это значение по умолчанию, "false" = не скрывать
  • background - задает фон для блока, внутри которого находится полоса прокрутки. (по умолчанию: "", т.е. никакого фона нет)
  • iframeautoresize - устанавливает автоматическое изменение размера iframe при загрузке его содержимого (по умолчанию: true)
  • cursorminheight - задает минимальную высоту полосы прокрутки в пикселях (по умолчанию: "20")
  • preservenativescrolling - разрешает горизонтальную прокрутку, подменяя событие прокрутки колёсиком мышки (по умолчанию:true)
  • railoffset - вы можете добавить смещение top / left для блока, внутри которого двигается полоса прокрутки (по умолчанию:false)
  • bouncescroll - включение подпрыгивания при достижения верхней или нижней границы блока (аналогично, как это происходит на сенсорных устройствах) (по умолчанию: false)
  • spacebarenabled - делает прокрутку вниз, при нажатии клавиши "пробел" (по умолчанию: true)
  • railpadding - задает отступы для блока, внутри которого движется полоса прокрутки (по умолчанию: {top:0, right:0, left:0, bottom:0})
  • disableoutline - для браузера chrome, отключение outline (оранжевая подсветка), при клике по полосе прокрутки (по умолчанию: true)
  • horizrailenabled - разрешает использование горизонтальной полосы прокрутки (по умолчанию: true)
  • railalign - задает расположение вертикальной полосы прокрутки (по умолчанию: "right")
  • railvalign - задает расположение горизонтальной полосы прокрутки (по умолчанию:"bottom")
  • enabletranslate3d - использовать CSS3 свойства для прокрутки контента (по умолчанию: true)
  • enablemousewheel - отслеживать события колесика мышки (по умолчанию: true)
  • enablekeyboard - отслеживать события клавиатуры (по умолчанию: true)
  • smoothscroll - задает плавную прокрутку (по умолчанию: true)
  • sensitiverail - при клике по блоку, внутри которого движется полоса прокрутки, происходит прокрутка (по умолчанию: true)
  • enablemouselockapi - использовать API событий мышки (используется при перемещении объектов) (по умолчанию: true)
  • cursorfixedheight - устанавливает фиксированную высоту полосы прокрутки в пикселях (по умолчанию: false)
  • hidecursordelay - устанавливает задержку в микросекундах до исчезновения полосы прокрутки (по умолчанию: 400)
  • directionlockdeadzone - мёртвая зона до участка блокировки (по умолчанию: 6)
  • nativeparentscrolling - отслеживает конец страницы (по умолчанию: true)
  • enablescrollonselection - разрешает автопрокрутку контента при выделении текста (по умолчанию: true)

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев (6)

Тигран 18 августа в 10:31

Исправьте опечатку "возможно" на "возможность" в touchbehavior.

Ответить

Сергей 26 марта 2016 г. в 18:22

Хорошее видео. Вот сделал без проблем http://eng-el.ru/.Подскажи, как настроить подобное сайту http://areaaperta.com/nicescroll/ при движении колесиком мыши линия прокрутки тоненькая, а при наведении курсора на нее полоса прокрутки увеличивается?Спасибо!)

Ответить

Андрей 5 марта 2016 г. в 16:52

Скажите, если всё подключено, как показано на видео, но полоса не меняется, в чём может быть загвоздка? Браузер Хром.

Ответить

Андрей 5 марта 2016 г. в 17:08

Прошу прощения, всё сделал, работает, это я нуб)

Ответить

Евгений 29 января 2016 г. в 11:47

Compatible with all desktop browser: Firefox 4+, Chrome 5+, Safari 4+ (win/mac), Opera 10+, IE 6+. (all A-grade browsers)
Compatible with mobile device: iPad/iPhone/iPod, Android 2.2+, Blackberry phones and Playbook (WebWorks/Table OS), Windows Phone 7.5 Mango and Windows Phone 8.

Ответить

Александр 8 мая 2015 г. в 01:57

Здравствуйте.
Для каких браузеров это актуально?

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад