PDA

View Full Version : Custom scrollbars with flexcroll



jej2003
16 Oct 2012, 11:26 AM
I'm looking for a way to style the scrollbars created on when an ExtJS component overflows. I've seen things like jScrollPane and flexscroll but I am running into issues where the scrollbar doesn't operate quite as I would expect specifically when resizing, most likely because I am doing something wrong. Does anyone have a working example of this? Any thoughts would be appreciated.

mitchellsimoens
22 Oct 2012, 8:59 AM
So all you want to do is style scroll bars? That's just CSS

jej2003
22 Oct 2012, 10:13 AM
What is the CSS for styling scrollbars in FireFox? I was under the impression that this wasn't supported, is that not the case?

James Goddard
22 Oct 2012, 10:27 AM
This is the CSS the sencha doc uses:

.iScroll ::-webkit-scrollbar,.iScroll::-webkit-scrollbar{
width:6px;
height:9px
}
.iScroll ::-webkit-scrollbar-button:start:decrement,.iScroll ::-webkit-scrollbar-button:end:increment,.iScroll::-webkit-scrollbar-button:start:decrement,.iScroll::-webkit-scrollbar-button:end:increment{
display:block;
height:0;
background-color:transparent
}
.iScroll ::-webkit-scrollbar-track-piece,.iScroll::-webkit-scrollbar-track-piece{
margin:10px 0;
-webkit-border-radius:0;
-webkit-border-bottom-right-radius:4px;
-webkit-border-bottom-left-radius:4px
}
.iScroll ::-webkit-scrollbar-thumb:vertical,.iScroll::-webkit-scrollbar-thumb:vertical{
height:50px;
background-color:rgba(0,0,0,0.12);
-webkit-border-radius:4px
}
.iScroll ::-webkit-scrollbar-thumb:horizontal,.iScroll::-webkit-scrollbar-thumb:horizontal{
width:50px;
background-color:rgba(0,0,0,0.12);
-webkit-border-radius:4px
}
#treecontainer .iScroll ::-webkit-scrollbar-thumb:vertical,#treecontainer .iScroll::-webkit-scrollbar-thumb:vertical{
height:50px;
background-color:rgba(0,0,0,0.06);
-webkit-border-radius:4px
}


And no, it does not work with firefox.