Есть ли способ управлять стилем полос прокрутки тега div? У меня возникают проблемы с контрастом между IE7 и FireFox 3.5.2. Любая помощь будет принята с благодарностью!

22
Dan Appleyard 10 Авг 2009 в 21:50

5 ответов

Лучший ответ

Используя javascript, вы можете стилизовать полосы прокрутки. Что отлично работает как в IE, так и в FF.

Проверьте ссылки ниже

из Twinhelix , Пример 2 , Пример 3 [или] вы можете найти около 30 типов стилей прокрутки, щелкнув ссылку ниже 30 техник прокрутки

28
Logesh Paul 11 Авг 2009 в 10:33

Нет, нельзя в Firefox, Safari и т. Д. Можно в Internet Explorer. Есть несколько скриптов, которые позволят вам создать полосу прокрутки.

2
Daniel A. White 10 Авг 2009 в 18:00

Этот хорошо справляется со своей прокруткой. Его очень легко понять, всего несколько строк кода, он хорошо написан и полностью читается.

2
Marco Demaio 6 Окт 2010 в 19:04

Глядя в Интернет, я нашел простой способ стилизовать полосы прокрутки.

Это парень! http: // almaer .com / blog / create-custom-scrollbars-with-css-how-css-isnt-great-for-every-task.

И вот моя реализация! https://dl.dropbox.com/u/1471066/cloudBI/cssScrollbars.png

/* Turn on a 13x13 scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 13px;
}

::-webkit-scrollbar-button:vertical {
    background-color: silver;
    border: 1px solid gray;
}

/* Turn on single button up on top, and down on bottom */
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    display: block;
}

/* Turn off the down area up on top, and up area on bottom */
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
    display: none;
}

/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:vertical:increment {
    display: none;
}

/* Place The scroll up button at the up */
::-webkit-scrollbar-button:vertical:decrement {
    display: none;
}

/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:horizontal:increment {
    display: none;
}

/* Place The scroll up button at the up */
::-webkit-scrollbar-button:horizontal:decrement {
    display: none;
}

::-webkit-scrollbar-track:vertical {
    background-color: blue;
    border: 1px dashed pink;
}

/* Top area above thumb and below up button */
::-webkit-scrollbar-track-piece:vertical:start {
    border: 0px;
}

/* Bottom area below thumb and down button */
::-webkit-scrollbar-track-piece:vertical:end {
    border: 0px;
}

/* Track below and above */
::-webkit-scrollbar-track-piece {
    background-color: silver;
}

/* The thumb itself */
::-webkit-scrollbar-thumb:vertical {
    height: 50px;
    background-color: gray;
}

/* The thumb itself */
::-webkit-scrollbar-thumb:horizontal {
    height: 50px;
    background-color: gray;
}

/* Corner */
::-webkit-scrollbar-corner:vertical {
    background-color: black;
}

/* Resizer */
::-webkit-scrollbar-resizer:vertical {
    background-color: gray;
}
2
Rodrigo Moraes 2 Окт 2012 в 21:30

Также есть проект iScroll, который позволяет вам стилизовать полосы прокрутки и заставить их работать с сенсорными устройствами. http://cubiq.org/iscroll-4

0
rmarscher 4 Апр 2012 в 18:53