Trying to apply a custom scroll bar

Question

I'm trying to apply a similar type of custom scroll bar into my website but I seem to be having some trouble.

Just want to know if this kind of custom scroll bar is complicated or easy to implement. This is the last obstacle in finishing my design. What are some suggestions or ideas for implementing this design?

I'm using [**NiceScroll**](https://github.com/inuyaksa/jquery.nicescroll) plugin and it's really nice. - here you have [some demos](http://nicescroll.areaaperta.com/demo.html) — balexandre, Aug 23 '13 at 12:39
Check out this post :) I still have it in my favourites. http://stackoverflow.com/questions/9251354/css-customized-scroll-bar-in-div — Rebelek, Aug 23 '13 at 12:40

score 0 · Answer 1 · answered Aug 23 '13 at 12:37

0

There are lot of jQuery UI plugin available and you can do this easily. Check it here and choose one.

answered Aug 23 '13 at 12:37

Deepak Biswal

4,280
2
20
37

score 0 · Answer 2 · answered Aug 23 '13 at 12:39

0

it is pretty easy to implement you can google for custom scrollbars or you can use tinyscrollbar or this

answered Aug 23 '13 at 12:39

Deep Sharma

3,374
3
29
49

Jakub Malec · Answer 3 · 2013-08-23T12:48:36.617

0

There are many javascript scrollbar scripts. You can try this one: http://www.dyn-web.com/code/scroll/ -> looks like you can easily replicate the scrollbar from your screenshot using this one.

edited Aug 23 '13 at 12:48

answered Aug 23 '13 at 12:41

Jakub Malec

146
8

score -1 · Answer 4 · answered Aug 23 '13 at 12:38

-1

You can try -webkit- scrollbar.Check this fiddle.Here is the code.

::-webkit-scrollbar {
width: 8px; height:8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
background:#fff;
}
::-webkit-scrollbar-thumb {
background: rgba(139,233,38,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

answered Aug 23 '13 at 12:38

Hamza Dhamiya

1,269
1
10
17

the world does not live with only 1 browser! – balexandre Aug 23 '13 at 12:39
your solution is for all scrolls in the page, I assume that he wants only for that particular `div`, – balexandre Aug 23 '13 at 14:08

Trying to apply a custom scroll bar

4 Answers4