How to move the scrollbar down


Tags: css,webkit,scrollbar,positioning

Problem :

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.


    CSS Howto..

    Why won't my background show within div container?

    How can I vertically align two floated divs?

    How to create CSS with 2 loops

    How to use webpack and css-loader to load only specific css class?

    How to override nth-child

    How to add a play icon to Image on CSS

    How to use custom underline with breakline in CSS?

    Jquery/CSS, how to have and access multiple (left) panels, while adjusting main content container automatically

    How do I change linked stylesheets?

    How put an element more close to a html label

    How to prevent Float contents overlap other contents below

    How to fix image urls when processing css files with Gulp?

    How can I centralize this jquery styling colors into css?

    How to create this quote box with (preferably) HTML5/CSS3?

    How to scroll to particular element using CSS/JS

    How to make a header bar fold over the webpage css

    How change color of text and image before print with css? [closed]

    How to hover a whole element to show details

    Show/Hide Div in jQuery, issue with “skipping” divs

    How To Turn JS Objects To HTML And Style With CSS

    How to add the same header and footer to all pages at once? HTML

    how to specify different css for ie

    How to access the physical Bundled and Minified js / css created by BundleConfig class

    How to enable auto indentation in lists and list items?

    How to indent input controls for a nested HTML list using CSS to a single column

    How to access an element's class value via CSS

    How to handle this CSS issue with Wordpress?

    How to CSS Display:table grow right

    HTML5 / CSS| How do I disable responsivity when a scroll bar appears?

    How do i make this nav 100% wide?