CODEWITHSUNDEEP
csswebkitscrollbarpositioning
ADM
ADM

Reputation: 31

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 -> _|
|                  | |
|                  |||
|__________________|_|

Upvotes: 3

Views: 5942

Answers (2)

SwiftNinjaPro
SwiftNinjaPro

Reputation: 853

Had a similar problem. I think I found an easy solution.

::-webkit-scrollbar-track {
  margin-top: 60px;
}

Or is you need to update it in JavaScript

css

::-webkit-scrollbar-track {
  margin-top: var(--scrollbar-margin-top, 60px);
}

js

myElement.style.setProperty('--scrollbar-margin-top', anotherElement.clientHeight + 'px');

Upvotes: 2

Giacomo Paita
Giacomo Paita

Reputation: 1419

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.

Upvotes: 1

Related Questions