Как поменять скроллбар на сайте?

Question

[Федор Скамейкин]

Как поменять скроллбар на сайте для body? Я видел плагины для jquery, но там только для отдельних div'ов

Answer 1

[Андрей]

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

Статьи на тему кастомизации скроллбара на css:
css-tricks.com/snippets/sass/custom-scrollbars-mixin
codemug.com/html/custom-scrollbars-using-css
Нужно учитывать, что в данный момент нет способа для ФФ

Для большей кроссбраузерности, и чтобы получить больше свободы в кастомизации, я написал собственный плагин на jquery: jquery.custom-scroll
Отличительная особенность от других плагинов — он не убирает нативный скролл полностью, а прячет, благодаря чему нет проблем описанных выше.
Есть похожее решение на js - baron.js - он не требует jquery, но весит вчетверо больше.

Comments

[Keyten]

И jScrollPane ещё.

[Андрей]

Keyten: в jScrollPane не работает прокрутка при зажатии средней кнопки мыши.
Он так же как и все убирает скролл в css .jspContainer { overflow: hidden; }

[Mokhirjon Naimov]

Андрей круто! :)

[Zombie42679]

Андрей: Использовал ваш custom-scroll, но возникла проблема (использую горизонтальный скролл), контент который скроллится достаточно высокий и почти 100% в ширину, проблема вот какая: когда листаешь страницу вниз и натыкаешься на этот контент, то скролл через колесико перестает работать, то есть сама страница встает. Как можно поправить ?

[Андрей]

Zombie42679: Попробуйте в настройках передать preventParentScroll: false
По вопросам плагина лучше пишите в issue: https://github.com/standy/custom-scroll/issues