Как можно использовать изображения полосы прокрутки?

Question

Как заменить изображения полосы прокрутки с помощью HTML / CSS?

У меня есть:

scrollbar-base-color: #00acee;  
scrollbar-dark-shadow-color: #00acee;  
scrollbar-track-color: #ffffff;  
scrollbar-face-color: #00acee;  
scrollbar-shadow-color: #00acee;  
scrollbar-highlight-color: #00acee;  
scrollbar-3d-light-color: #00acee;

Могу ли я использовать изображение для реализации той же идеи?

Answer 1

Нет, вы не можете использовать изображения вместо полосы прокрутки. Я также просто упомяну, что изменение цвета очень раздражает пользователей и в любом случае работает только в IE, поэтому просто придерживайтесь стандартных элементов GUI.

Answer 2

Для браузеров на основе webkit (для достаточно нового значения "webkit") существует коллекция собственных CSS-свойств .

Answer 3

Нет, вы не можете использовать изображение в полосе прокрутки. (Кроме того, даже изменение цвета поддерживается только в IE в нестандартном режиме.)

Единственный способ использовать изображения в полосе прокрутки - это вообще не использовать стандартную полосу прокрутки, а создать собственную полосу прокрутки самостоятельно с использованием DHTML или найти кого-то, кто уже сделал это.

Однако вы должны быть немного ограничены при изменении вида элементов управления, к которым пользователи уже привыкли. Если вы не будете осторожны, вы можете запутать людей, чтобы они вообще не распознали их как полосу прокрутки ...

Answer 4

Webkit == Safari и Chrome, но Firefox и Opera планируют реализовать подобное в следующих выпусках. Однако эта специализация является убийцей, поэтому ее не стоит использовать, даже если у вас есть поддержка.

Mootools имеет довольно много:

1. Mooscroller (будет реализовано в Mootools -more),
2. MooScroll (на основе Solutaire's ?)
3. UvumiScroll
4. MochaUI в

Я думаю, что это часть Ext UI и, возможно, библиотека JQ UI, но у меня нет личного опыта.

Один не зависящий от библиотеки класс: http://www.hesido.com/web.php?page=customscrollbar

Answer 5

Для MooTools , есть MooScroller .

Steve

Answer 6

jScrollPane ( демо )

или

Интерфейс ( демо ).

Оба используют jQuery.

Answer 7

Невозможно поместить изображение внутри полосы прокрутки. Настройка полосы прокрутки не является спецификацией W3C (только для IE), но подробности о том, что возможно, можно найти здесь:

http://www.quirksmode.org/css/scrollbars.html

Answer 8

насколько я знаю, вы не можете стилизовать полосу прокрутки с изображением. если вы хотите использовать jquery, вы можете легко сделать это с помощью этого плагина jquery:

http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html

Хитрость заключается в том, чтобы "имитировать" полосу прокрутки, используя некоторые элементы div, которые можно стилизовать любым способом, который вы хотите, поскольку они являются обычными элементами div. После этого легко использовать свойство scrollTop, события прокрутки и т. Д. (Но вам не нужно знать, как это работает, чтобы использовать его)