Изменение стиля полос прокрутки

Question

Можно ли изменить стиль полос прокрутки для всех браузеров?Если да, то как?

Answer 1

В Internet Explorer возможно использование нескольких нестандартных scrollbar-* свойств CSS. См. эту страницу для удобного инструмента генератора.

Кроме этого, это возможно только при использовании пользовательских решений на основе прокрутки на основе JavaScript. Плагин jScrollPane jQuery выглядит очень красиво и прост в установке. Здесь - пример страницы.

Answer 2

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

---

Расширения поставщиков

Internet Explorer (начиная с версии 8) имеет расширения CSS и DOM, позволяющие указывать цвет только для различных частей полосы прокрутки.

Обновленная ссылка на документацию Microsoft: http://msdn.microsoft.com/en-us/library/ff974092(v=VS.85).aspx. Вы можете просто просмотреть все свойства, начинающиеся с "-ms-scrollbar".

WebKit (например, Safari и Chrome) содержит псевдоэлемент CSS для стилизации полос прокрутки, который позволяет применять любое свойство CSS к нему. Чтобы узнать больше, посмотрите этот пост Surfin 'Safari в блоге: http://webkit.org/blog/363/styling-scrollbars/

Пример: * * один тысяча двадцать-одна

::-webkit-scrollbar
{
    width: 13px;
    height: 13px;
}

Mozilla (например, Firefox) и Opera , похоже, не поддерживают стилевые полосы прокрутки.

---

Пользовательские полосы прокрутки

Относительно jScrollPane jQuery плагин является отличным выбором, если вам нужны пользовательские полосы прокрутки. Он достаточно исчерпывающий в отношении ожидаемой функциональности полос прокрутки и не дает вам развернуться.

Важно понимать, что jScrollPane заменяет родные полосы прокрутки браузера, и вы можете не найти «прикосновения и отзывчивости» этих пользовательских полос прокрутки столь же хорошими, как «настоящие». Но опять же, это может быть достаточно, если вы оцениваете форму поверх функции.

Это более свежая ссылка на документацию jScrollPane: http://jscrollpane.kelvinluck.com/

Answer 3

Неа. IE позволяет устанавливать цвета для некоторых составных частей полосы прокрутки. Opera допускает несколько, но не все из этих стилей.

Цветовое оформление полосы прокрутки становится все более неактуальным, поскольку пользовательские интерфейсы переходят к сложному тематическому построению полосы прокрутки на основе изображений. В IE установка любого из цветов возвращает рендеринг обратно к простой 3D-полосе прокрутки в стиле Windows 2000 вместо какой-либо изворотливой пользовательской темы. Пользователи Windows Vista / 7 (Aero), вероятно, не поблагодарит вас за это.

Вы, конечно, можете сделать свои собственные полосы прокрутки из <div> s и оформить их так, как вам нравится. Но результат почти всегда ведет себя хуже, чем реальные полосы прокрутки, поскольку вы пытаетесь воспроизвести сложный элемент пользовательского интерфейса, ожидаемое поведение которого отличается для каждой ОС. Вы можете потратить много времени на воспроизведение поведения подкачки, клавиатуры вверх / вниз и колесика мыши, но это никогда не будет вполне таким гладким, как на реальной полосе прокрутки ОС.

Answer 4

Вы можете стилизовать полосы прокрутки для всех браузеров с небольшим количеством Javascript. Но в настоящее время нет способа стилизовать их, используя только CSS в качестве кросс-браузерного решения.

Эта статья поможет, если вы решите использовать Javascript .