Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    63
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Webkit scrollbar

    Hello all. After some search, I found the most adequate way to customize a scroll bar. I only want to have this custom scroll bar for 1 div I have and not the entire site. I've been trying to get that to work, but no matter what I do, the custom scroll bar always appears on both the div and the browser scroll on the right. Any ideas on how I could get this to work for the specific div class?

    This is the webkit I'm using :

    Code:
    ::-webkit-scrollbar-track-piece {
    	background-color:#fff;
    	-webkit-border-radius:0;
    }
    ::-webkit-scrollbar {
    	width:8px;
    	height:8px;
    }
    ::-webkit-scrollbar-thumb {
    	height:50px;
    	background-color:#f26522;
    	-webkit-border-radius:4px;
    	outline:2px solid #fff;
    	outline-offset:-2px;
    	border: 2px solid #fff;
    }
    ::-webkit-scrollbar-thumb:hover {
    	height:50px;
    	background-color:#f26522;
    	-webkit-border-radius:4px;
    }

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    96
    Thanks
    1
    Thanked 13 Times in 13 Posts
    There is no way. Customizing the scrollbar only works in IE and will change all scrollbars you see on that page.

    One important thing you must know about a colored scrollbar is that it does not do not work in Gecko-based browsers (Firefox, Netscape Navigator, Mozilla): It is an Internet Explorer's only property. It is not a standard property or a proprietary property. According to W3C, these properties are illegal: they are neither defined in any CSS specification nor are they marked as proprietary (by prefixing them with "-vendor-")

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    63
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sean3838 View Post
    There is no way. Customizing the scrollbar only works in IE and will change all scrollbars you see on that page.
    Thats a shame. It works fine in chrome. I guess I'll resort to using a jquery script


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •