PDA

View Full Version : Customize scroll bar for one div only?


FethrdWlf
05-29-2011, 05:42 PM
I have a page* consisting of four parts: The header, the main content, and then two floating divs below that (they're side by side). The one on the right has a scroll bar. I'm looking to change the CSS of just that one bar. I've found some CSS** online that will change it, but it changes all of them, meaning the one that scrolls the whole page.

How can I achieve the change of just one specific bar?

* - View the page here (http://villaingogh.x10mx).
** - /* Turn on a 13x13 scrollbar */
::-webkit-scrollbar {
width: 13px;
height: 13px;
}

::-webkit-scrollbar-button:vertical {
background-color: red;
border: 1px dashed blue;
}

/* 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 {
background-color: black;
border: 1px dashed blue;
}

/* Place The scroll up button at the up */
::-webkit-scrollbar-button:vertical:decrement {
background-color: purple;
border: 1px dashed blue;
}

::-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: 1px solid #000;
}

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

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

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

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

/* Resizer */
::-webkit-scrollbar-resizer:vertical {
background-color: gray;
}

I know the above code makes everything look wacky, I was gonna' change it later on.:cool:

DWcourse
05-29-2011, 06:14 PM
Your link doesn't work

FethrdWlf
05-29-2011, 06:42 PM
Your link doesn't work

Sorry, let's fix that: villaingogh.x10.mx (http://villaingogh.x10.mx)

DWcourse
05-29-2011, 06:47 PM
Link works now but I'm not seeing any scrollbar customization.

gentleone
05-29-2011, 07:07 PM
According to that code you have it's only for webkit browsers (Safari & Chrome).

If you want a cross-browsers solution then you should look into jscrollPane
http://jscrollpane.kelvinluck.com/

FethrdWlf
05-29-2011, 08:45 PM
Link works now but I'm not seeing any scrollbar customization.

I haven't used it because it totally messes up the look of the website. There's green and red and purple, and my website is kinda dark, not a kindergarten classroom.;)

According to that code you have it's only for webkit browsers (Safari & Chrome).

If you want a cross-browsers solution then you should look into jscrollPane
http://jscrollpane.kelvinluck.com/

Thanks gentleone, I'ma look into it soon.

DWcourse
05-29-2011, 10:02 PM
I haven't used it because it totally messes up the look of the website. There's green and red and purple, and my website is kinda dark, not a kindergarten classroom.;)

It's just easier to help out if you post a sample page. A link to a page that doesn't have the issue isn't much help.

FethrdWlf
05-29-2011, 10:29 PM
It's just easier to help out if you post a sample page. A link to a page that doesn't have the issue isn't much help.

Okay, I'll add the CSS, just one sec... There.:D

edbr
05-30-2011, 02:07 AM
you could add moz scrollbars i suppose

FethrdWlf
05-31-2011, 02:03 AM
you could add moz scrollbars i suppose

Oh, are the scrollbars not showin' up as being customized in Firefox?...

edbr
05-31-2011, 02:25 AM
no webkit is for safari and chrome only

gentleone
05-31-2011, 08:34 AM
Oh, are the scrollbars not showin' up as being customized in Firefox?...
I already told you that, FethrdWlf. If you want a cross-browser customized scrollbar, check that link I gave you.