web-dev-qa-db-fra.com

Barre de défilement div

Est-il possible de contrôler le style des barres de défilement d'une balise div? Je rencontre des problèmes de contraste entre IE7 et FireFox 3.5.2. Toute aide serait grandement appréciée!

cssinternet-explorerhtmlscrollbar
22
Dan Appleyard

En utilisant javascript, vous pouvez styliser les barres de défilement. Ce qui fonctionne bien dans IE ainsi que FF.

Consultez les liens ci-dessous

De Twinhelix , Exemple 2 , Exemple [ou] vous pouvez trouver quelque 30 types de styles de style de défilement en cliquant sur le lien ci-dessous techniques de défilement

28
Logesh Paul

En regardant le Web, je trouve un moyen simple de styliser les barres de défilement.

C'est LE mec! http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task

Et voici ma mise en place! 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

Non, vous ne pouvez pas dans Firefox, Safari, etc. Vous pouvez le faire dans Internet Explorer. Il existe plusieurs scripts qui vous permettront de créer une barre de défilement.

2
Daniel A. White

Celui-ci fait bien son travail de défilement . C'est très facile à comprendre, juste très peu de lignes de code, bien écrites et totalement lisibles.

2
Marco Demaio

Il y a aussi le projet iScroll qui vous permet de styliser les barres de défilement et de les faire fonctionner avec des appareils tactiles. http://cubiq.org/iscroll-4

0
rmarscher