javascript - custom scrollbar without jquery - Stack Overflow

admin管理员组

文章数量:1320799

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

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

• javascript
• scrollbar

Share Improve this question Follow asked Jul 16, 2013 at 18:29 nonnnnnnonnnnn 69322 gold badges88 silver badges1818 bronze badges 4

• Specify what about the scrollbar you want to customize. You can do some things with just CSS. – bengoesboom Commented Jul 16, 2013 at 18:30
• 1 yeah i know that i can style the webkit scrollbars just with css. but i need a bit more than just the style. the scrollbar has to be over the content like on android or ios. – nonnnnn Commented Jul 16, 2013 at 18:57
• See my answer here: stackoverflow./questions/27322881/… – AdamSchuld Commented Feb 27, 2015 at 6:55
• See my answer here: stackoverflow./questions/7357203/custom-scrollbars/… – Buzinas Commented Sep 6, 2015 at 15:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

Ok, for peoples who are looking also for a nice scrollbar without dependencies:

You can use IScroll if you need a bit more than just a scrollbar or the Gemini Scrollbar, which is absolutely amazing and uses native scrolling behaviour.

本文标签： javascriptcustom scrollbar without jqueryStack Overflow