Spunky Posted January 17, 2013 Share Posted January 17, 2013 First of all, why isn't there any information about customizing scroll bars using CSS on the w3schools website?? Well anyway, I was trying to figure out how to customize scroll bars and when I Googled it I thought for sure the only way was going to be by using JavaScript, to my pleasant surprise the top of the search was a way using CSS. Although I am aware it is not supported in all browsers. Well, the article I found is from a beloved site: http://css-tricks.com/custom-scrollbars-in-webkit/ and I think one of the states it shows is what I need but I am confused how to use it. What I am trying to do is: I have panels that open and close (using JQuery), these panels are inside a div that is too small for it so I have a scroll bar. When I open the bottom panel, you can't see the panel open because it is hidden by the bottom of the div, you have to then scroll down to view it. I think that using the :decrement state would solve this problem if used correctly but I am confused how it would be used. I've tried Googling further examples but this seems to be a very new unused concept. Could anyone help me solve my problem? Link to comment Share on other sites More sharing options...
Ingolme Posted January 18, 2013 Share Posted January 18, 2013 -webkit is a proprietary prefix and doesn't mean it's part of the standard, which is why W3Schools doesn't have it on their site. It's not that great if it only works on webkit browsers anyways. Link to comment Share on other sites More sharing options...
Spunky Posted January 19, 2013 Author Share Posted January 19, 2013 Yea, I realize it is not the best option to use. But I enjoy learning all things CSS so would still like to figure it out. I just can't find examples how to use it anywhere! Link to comment Share on other sites More sharing options...
Ingolme Posted January 20, 2013 Share Posted January 20, 2013 From what I'm reading in the article you showed, ::-webkit-scrollbar-button:decrement:vertical will target the up button, :increment:vertical targets the down button, :decrement:horizontal targets the left button, :increment:horizontal targets the right button. Is there anything specific you want to do? I can interpret the article for you if you need it. Link to comment Share on other sites More sharing options...
Spunky Posted January 20, 2013 Author Share Posted January 20, 2013 Oh it targets the button it huh. Well, with my example above, if you open the bottom panel then it expands the height of the div it is in. When it opens, you can't see what is inside until you scroll down the added space from opening the panel. I'm just trying to get it so it scrolls down when the div height is increased or when the panel is clicked to be open or something. I'm just not sure what sort of properties go with this element to deduce how to accomplish this. Like, how to decrement. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now