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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.