Jump to content
Spunky

CSS -webkit-scrollbar

Recommended Posts

First of all, why isn't there any information about customizing scroll bars using CSS on the w3schools website?? :huh: 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? :D

Share this post


Link to post
Share on other sites

-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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. :huh:

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...