Scroll bar design

Hi I was wonder How can I make my scroll bar match the one in the photo.
This is my css for the scroll bar:
display: inline-block;
    width: 200px;
    margin-left: 30px;
    margin-top: 34px;
    overflow-y: scroll;
    height: 800px;

Open in new window

This is my scroll bar now:
my scroll
The scroll I want:
scroll I want

Also my current scroll height depends on the elements in it. Can't I made it as long as the page even if its empty users can scroll?
LVL 1
Jazzy 1012Asked:
Who is Participating?
 
Mohamed ElazabteacherCommented:
just use this in css code

::-webkit-scrollbar { width: 7px;}
::-webkit-scrollbar-track {background: #fff;border-radius: 5px;  }
::-webkit-scrollbar-thumb {background: #ccc; border-radius: 5px; }

Open in new window

0
 
Juana VillaFront-end DeveloperCommented:
Hi,
The best solution will be to use a plugin because scroll bar styles are done by the browser. Unfortunately, there is not a way to style them cross browser using only css.

You could use this plug in and customize the css as you want.

You can also use css but this option is NOT cross browser (it only works on Chrome and Safari). This is an example about how to use -webkit-scrollbar and here it is article that explains more about it.

About keeping the scroll bar when the main container is empty: The function of a scroll bar is to scroll content that cannot be seen. Having a scroll bar on an empty container might be a poor user experience because the user will be expecting to scroll to see more content but they will scroll and see NOTHING... making them think that something is wrong with your website. I will suggest not to do this.

Anyway, if you insist on having a scrollbar with an empty container, you could set the container to be a min-height of 105vh. This means that the container will be 5vh (view height) taller than device or the wrapper container (which should have a smaller height; for example: 100vh).
0
 
gobinath rajuCommented:
min-height:auto;

height:800px;
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.