Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

custom scrollbar without jquery

I'm looking for a custom scrollbar that works without jquery. I can't use jquery because the other stuff is also jqueryless and it's optimized for fast loading.

Would be grateful for any ideas shared with me.

NONNNNN

like image 299
nonnnnn Avatar asked Jul 16 '13 18:07

nonnnnn


1 Answers

If you don't want to use jQuery you could always attempt CSS (only works in WebKit).

JSFIDDLE

Example CSS:

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
   background-color: #000000;
}

::-webkit-scrollbar-thumb {
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
   background-color: #555555;
}

::-webkit-scrollbar-button {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
   background-color: #000000;
   background-image: url(dark/light-blue/images/ui-icons_0990fb_256x240.png);
}

::-webkit-scrollbar-button:vertical:increment {
   background-position: -64px -16px;
}

::-webkit-scrollbar-button:vertical:decrement {
   background-position: 0 -16px;
}

::-webkit-scrollbar-button:horizontal:increment {
   background-position: -32px -16px;
}

::-webkit-scrollbar-button:horizontal:decrement {
   background-position: -96px -16px;
}

::-webkit-scrollbar-corner {
   background-color: #000000;
}

More on WebKit Custom Scrollbars

If you want multiple browser support you'll want to use jQuery or write your own custom javascript code with appending a div for the scrollbar and adding Event Handlers to know when you scroll.

Example of Custom Scrollbar Code

like image 69
Steven10172 Avatar answered Nov 05 '22 18:11

Steven10172