Jazzy 1012
asked on
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:
The 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?
This is my css for the scroll bar:
display: inline-block;
width: 200px;
margin-left: 30px;
margin-top: 34px;
overflow-y: scroll;
height: 800px;The 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?
min-height:auto;
height:800px;
height:800px;
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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).