csswebkitscrollbarpositioning

How to move the scrollbar down

So I have a scrollbar that I have styled using CSS.

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}

::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
padding-top: 60px; /*doesn't work*/
}

::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}

Unfortunately the 'padding-top: 60px;' doesn't work. Is it possible to move it down 60px? If so how would I go about doing this? Thanks! :)

Edit: Ascii image to explain what I want to happen.

_____________________
|       60px gap -> _|
|                  | |
|                  |||
|__________________|_|
Solution

  • You can't set a padding to the scroll.
    You can use a 'fake' container and make it scrollable, absolute positioned 60px on top:

    .wrapper {
   position: absolute; 
   overflow-y:auto;
   left:0;
   right:0;
   top:60px; 
   background:gold;
   padding:20px;
}

    See the working demo here.