Div Scrollbar - un moyen de le styliser?
y a-t-il un moyen de contrôler le style des barres de défilement d'une étiquette div? J'ai des problèmes de contraste entre IE7 et FireFox 3.5.2. Toute aide serait grandement appréciée!
5 réponses
en utilisant javascript, vous pouvez styliser les barres de défilement. Ce qui fonctionne aussi bien en IE qu'en FF.
consultez les liens ci-dessous
À Partir De Twinhelix , exemple 2 , exemple 3 [ou] vous pouvez trouver quelques 30 types de style de rouleau par clic sur le lien ci-dessous 30 techniques de défilement
Non, vous ne pouvez pas dans Firefox, Safari,etc. Vous pouvez dans Internet Explorer. Il existe plusieurs scripts qui vous permettront de vous faire une barre de défilement.
celui-ci fait bien son travail de scrolling. Il est très facile à comprendre, juste quelques lignes de code, bien écrit et totalement lisible.
en regardant le web, Je trouve un moyen simple de styliser les barres de défilement.
C'est le gars! http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task
Et voici mon œuvre! 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;
}
il y a aussi le projet iScroll qui vous permet de modeler les barres de défilement et de les faire fonctionner avec des appareils tactiles. http://cubiq.org/iscroll-4