#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0

    Design a Chrome Scroll bar


    Hello,

    I'm trying to design a scrollbar for Chrome that will be similar to Facebook scroll bar. A scroll that gets wider on hover and thin again when mouse is out.
    I have successfully changed the mouse's width on hover but don't know how to make it thin again when mouse is out.

    Thank you,
    Dana
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    What have you got so far, code wise? If you could post your code; that would help.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    2
    Rep Power
    0
    Sure, this is what I have so far:

    Code:
    ::-webkit-scrollbar {
    	/* set the width of the scroll bar */
    	width: 7px !important;
    }
    
    ::-webkit-scrollbar-button:start:decrement, 
    ::-webkit-scrollbar-button:end:increment {
    	/* hide the arrows */
    	display: block;
    	height: 10px;
    }
     
    ::-webkit-scrollbar-track-piece {
    	/* set the style/colour of the scroll bar background */
    	background-color: #BFBFBF !important;
    	-webkit-border-radius: 4px;
    }
     
    ::-webkit-scrollbar-thumb:vertical{
    	background-color: #fff !important;
    	-webkit-border-radius: 4px;
    	border: 1px solid #cccccc;
    	-webkit-background-clip: padding-box;
    }
    	
    ::-webkit-scrollbar-track-piece:horizontal{
    	background: none;
    	-webkit-box-shadow:none;
    }
    	
    ::-webkit-scrollbar:horizontal{
    	height: 7px;
    }
    	
    ::-webkit-scrollbar-thumb:horizontal{
    	height: 7px;
    	-webkit-border-radius:4px;
    	background-color: #fff !important;
    	border: 1px solid transparent;
    	-webkit-background-clip: padding-box;
    }
    		
    ::-webkit-scrollbar-thumb:hover
    {
    	border: 1px solid #9DBED6;
    	background-color: #fff !important;
    }
    
    ::-webkit-scrollbar-thumb:active
    {
    	border: 1px solid #99A1A4;
    	background-color: #0C99C9 !important;
    }
    
    ::-webkit-scrollbar:hover
    {
    	width: 10px !important;
    	height: 10px !important;
    }

IMN logo majestic logo threadwatch logo seochat tools logo