В разных операционных системах по умолчанию разные полосы прокрутки для браузеров. Но к счастью можно задавать свои собственные цвета для данного элемента, чтобы выделить свой сайт среди остальных. Как-то раз я был на одном английском сайте, и мне очень понравилось как гармонируют цвета сайта с цветом полосы прокрутки. Поэтому если вы решили сделать цвет прокрутки нестандартный, то убедитесь что он подходит по цветовой гамме вашему сайту.
В данной статье мы рассмотрим jQuery плагины, позволяющие сделать нестандартную полосу прокрутки в браузере, так как CSS свойства поддерживаются не всеми браузерами.
Приступим к рассмотрению данных плагинов, которые изменяют вид полосы прокрутки в браузере.
1. NiceScroll.jsNiceScroll является jQuery плагином, который позволяет создать полосу прокрутки похожую на iOS.
2. NanoScrollДанный плагин позволяет создать полосу прокрутки на вашем сайте как в Mac OS X.
3. jQuery custom content scrollerПлагин jQuery для стилизации полосы прокрутки в браузере с помощью CSS.
4. Tiny ScrollbarЛегкий jQuery плагин написанный с помощью jQuery библиотеки, который придаст красивый вид прокрутки контента и полосы прокрутки главного окна браузера.
5. Scrollbar VisibilityЛегкий плагин написанный с помощью jQuery библиотеки, который придаст красивый вид прокрутки контента и полосы прокрутки главного окна браузера.
6. jScrollPaneС помощью данного плагина также можно делать пользовательские полосы прокрутки, которые работают во всех современных браузерах. Стили можно менять с помощью CSS файла.
7. Scrollbar PaperС помощью данного плагина нельзя придать стиль полосе прокрутки которая у браузера, но можно задать для содержимого фреймов внутри страницы.
8. jQuery Scrollbars v2Полностью настраиваемые полосы прокрутки, а также показывает стандартные если Javascript отключен в браузере.
9. Vertical scrollbarДля данного плагина необходимо фиксированная высота контейнера, потому что полоса прокрутки расположена справа с помощью позиционирования.
Прокрутка страниц в системе Microsoft Windows обеспечивается настройками мыши и параметрами отображения полосы прокрутки. Обе эти настройки не требуют специальных компьютерных навыков и доступны рядовому пользователю.
ИнструкцияСегодня поговорим о полосе прокрутки страниц. А точнее про ее внешний вид, который толком не меняется уже несколько десятилетий. И мне, собственно как и вам, она изрядно поднадоела. По этому мы рассмотрим возможность о ее замене на свою.
Данное решение является очень удобным, так, как здесь не задействуются JavaScript . Что в свою очередь убирает нагрузку на сайт. Все работает с помощью стилей и имеет минимум кода.
УстановкаВставляем данный код в Таблицу стилей (CSS)
::-webkit-scrollbar-button {
background-image:url("");
width:5px;
height:0px
}
::-webkit-scrollbar-track {
background-color:#ecedee
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background-color:#6dc0c8;
}
::-webkit-scrollbar-thumb:hover{
background-color:#56999f;
}
::-webkit-resizer{
background-image:url("");
background-repeat:no-repeat;
width:4px;
height:0px
}
::-webkit-scrollbar{
width: 4px;
}
Установка на этом завершена. Теперь разберем, какая строка за что отвечает.
Цвет дорожки, по которой двигается бегунок прокрутки.
Меняем ecedee на свой цвет.
::-webkit-scrollbar-track {
background-color:#ecedee
}
Цвет бегунка полосы, а так же его закругление.
Меняем 6dc0c8 на свой цвет.
Меняем значение border-radius для закругления.
::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background-color:#6dc0c8;
}
Цвет бегунка при наведении на него курсора.
Меняем 56999f на свой цвет.
::-webkit-scrollbar-thumb {
-webkit-border-radius: 0px;
border-radius: 0px;
background-color:#6dc0c8;
}
Основная ширина полосы прокрутки.
Меняем значение width
::-webkit-scrollbar{
width: 4px;
}
В качестве примера мы сделали прокрутку в таком стиле:
Установите на сайт данный скролл, просто скопировав следующий код:
200?"200px":""+(this.scrollHeight+5)+"px");"> ::-webkit-scrollbar-button {
background-image:url("");
background-repeat:no-repeat;
width:6px;
height:0px
}
::-webkit-scrollbar-track {
background-color:#32312e;
box-shadow:0px 0px 3px #000 inset;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
border-radius: 5px;
background-color:#ffcb17;
box-shadow:0px 1px 1px #fff inset;
background-image:url("https://сайт/_pu/24/59610063.png");
background-position:center;
background-repeat:no-repeat;
}
::-webkit-resizer{
background-image:url("");
background-repeat:no-repeat;
width:7px;
height:0px
}
::-webkit-scrollbar{
width: 11px;
}
Стандартная полоса прокрутки в принципе ничем не мешает, но тем неимение ее можно немного доработать. тот способ что я покажу может не только изменить прокрутку, но и придать ей определенную анимацию, замедлить скроллинг и тд. Так же данная прокрутка может иметь любой внешний вид, у нее имеется много стилей и при желании сможете все их опробовать, но об этом позже. То что получится в итоге можно посмотреть по ссылке ниже.
Приступим до воплощения такой доработки. Так как наш скрипт полосы прокрутки использует jQuery, нужна эта самая библиотека jQuery. Ее нужно подключить к сайту. Если библиотека была ранее подключена на сайте, то этот шаг можно пропустить, если нет, то нужно ознакомится с статьей . Строка с ссылкой на библиотеку:
Далее вам понадобится подключить сам скрипт. Его вы можете взять из архива который скачаете по ссылке выше. Файл со скриптом называется custom_scrollbar.min.js . В статье что я рекомендовал есть примеры, как подключать файлы со скриптами. делать это следует после библиотеки.
Чтобы запустить наш скрипт и параллельно задать настройки прокрутке, нужно добавить еще один небольшой скрипт:
$(window).load(function(){ $("body").mCustomScrollbar({ theme:"dark-3" }); });
В данном примере есть только одна настройка - указана тема оформления dark-3 . Тем у данной прокрутки много. Можете указать любую. Все их можно взять из списка ниже или из файла стилей, об этом позже. В общем, просто копируете название и добавляете в скрипт выше.
- light
- light-2
- dark-2
- light-thick
- dark-thick
- light-thin
- dark-thin
- rounded
- rounded-dark
- rounded-dots
- rounded-dots-dark
- 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. В итоге, код будет таким:
$(window).load(function(){ $("body").mCustomScrollbar({ theme:"dark-3", scrollInertia:3000 }); });
Чтобы все темы оформления и вообще полоса прокрутки отображалась правильно нужно подключать стили CSS. Если вы не особо хотите заморачиваться, то просто подключайте файл стилей, что так же лежит в скачанном вами архиве и называется - custom_scrollbar.css . Если же заморочится, то из него можно взять только основные моменты. Общие стили и стили определенной темы оформления. остальное попросту не подключать, ведь это лишние строки кода и просто так, сайту они не нужны.
Так же у вас на сайте должны будут установлены определенные стили. Чаще всего они и так будут установлены, но вдруг это не так, то добавьте их себе.
Body{ margin: 0; padding: 0; } html, body{ height: 100%; }
Если все сделано правильно и ваша страница на сайте имеет большую высоту, чтобы появилась прокрутка, то все должно работать. Теперь можете применять ее на своих проектах и радовать себя и заказчиков необычным решением.
На этом все, спасибо за внимание. 🙂
Настраивая скроллинг, важно понимать следующие моменты:
1. Скорость прокрутки внешней мыши и тачпада регулируются разными настройками.
2. Кроме системных настроек, на скорость прокрутки могут влиять параметры браузера, в том числе — различные надстройки и расширения.
Итак, войдите в Панель управления и выберите раздел Мышь :
Изменение скорости прокрутки мышиПерейдите на вкладку Колесико .
Выберите, на сколько строк будет смещаться прокручиваемый контент за один шаг (щелчок) колесика:
Изменение скорости прокрутки тачпадаДля изменения параметров тачпада в системе обязательно должен быть установлен драйвер устройства. Его всегда можно найти на сайте производителя ноутбука . Также, спешим заметить, что Windows 8.1 способна успешно находить и устанавливать драйверы популярных устройств самостоятельно через Интернет. И тачпад — не исключение. На картинках ниже мы показываем, как настроить сенсорную панель от производителя Synaptics, которым комплектуется наш ноутбук HP. Всё, что мы сделали — это установили лицензионную Windows 8.1 и подключились к wifi-роутеру. А через несколько минут нужный touchpad driver был скачан и установлен вместе с драйверами других устройств и обновлениями Windows.
Поэтому вы можете выполнить поиск обновлений вручную и есть большая вероятность, что Windows скачает недостающий драйвер:
Перейдите на вкладку Параметры устройства .
Выделите в списке ваше устройство.
Нажмите кнопку Параметры :
В окне настроек сенсорного устройства перейдите в раздел Прокрутка .
Выберите нужную скорость (в нашем случае её нужно было уменьшить).
Нажмите Применить для сохранения изменений:
Я изменил скорость прокрутки. Почему она не меняется?Если в браузере установлено расширение для плавной прокрутки (например SmoothScroll), то его настройки имеют приоритет над системными. Поэтому, если после изменения настроек тачпада и мыши вы не наблюдаете никаких изменений, проверьте, не установлены ли в браузере подобного рода дополнения.
После изменения настроек скроллинга в расширении, необходимо обновить страницу браузера (F5) для того, чтобы изменения вступили в силу.
Нажмите кнопку Меню .
Выберите Дополнительные инструменты .
Кликните на Расширения :
Найдите в списке нужное расширение и нажмите на ссылку Параметры под ним:
Если говорить конкретно о расширении SmoothScroll, то для изменения скорости прокрутки веб-страниц вам нужно задать нужное значение в поле Step size и нажать кнопку Save Settings внизу страницы:
Как изменить скорость перемещения указателяНастройка скорости движения курсора является общей и для тачпада, и для внешнего манипулятора.
Перейдите на вкладку Параметры указателя .
Выберите комфортную скорость с помощью регулятора.