Stylize scrollbar with two elements only

Question

I'm trying to stylize the scrollbar using NiceScroll Plugin, I'm doing so with css besides the parameters it offers, the thing is that it creates two HTML elements, and the design I have "has" three elements.

here are the parameters I'm using:

$('.albums').niceScroll({
    cursorcolor: '#D289A6',
    cursorwidth: '10',
    cursorborder: '',
    cursorborderradius: '12px',
    background: '#fff'
});

Here is the image of the scrollbar:

enter image description here And here is the jsFiddle I created to reproduce it: http://jsfiddle.net/YKhce/

I'm missing the white "rail", and I donb't want to use :before and :after pseudo-elements because the users will use this mostly in IE.

How to achieve this?

G-Cyrillus · Answer 1 · 2013-06-06T15:52:33.103

0

you could draw it with box-shadow and outline:
http://jsfiddle.net/ScndL/

#outter {
    width: 25px;
    height: 400px;
    background:white;
    border-radius:10px;
    box-shadow:inset -1px 0 0 10px #2956a1, 0 0 0 3px #2956a1;
    outline: solid 5px #2956a1;
    outline-offset:-2px
}

update to square http://jsfiddle.net/ScndL/1/

#outter {
    width: 25px;
    height: 400px;
    background:white;
    box-shadow:inset -1px 0 0 10px #2956a1;
}

edited Jun 06 '13 at 15:52

answered Jun 06 '13 at 15:46

G-Cyrillus

101,410
14
105
129

That's a good step, bit I need the inner white part with rounded corners and the outter blue with no corners. – Raúl De Zamacona Jun 06 '13 at 15:48
oki, so it is even more simple. remove border-radis and outline. See updated jsFiddle – G-Cyrillus Jun 06 '13 at 15:50
I don't think I got it, If I remove the border radius the pink part loses it's rounded corners, but what I need is the white part with rounded corners and the blue part without rounded cornes. – Raúl De Zamacona Jun 06 '13 at 15:56
did you have time to check jsfiddle updated (see lower in the answer :) ) – G-Cyrillus Jun 06 '13 at 15:58
Do you mean this one http://jsfiddle.net/ScndL/1/? Yes, I saw it, but I still do not understand what you mean. :/ – Raúl De Zamacona Jun 06 '13 at 16:00
yes , or do i totally misunderstand you ? First one looked similar to your screen, rounded inside, square outside. Second is just square outside and inside. Pinkish button remains rounded in both. – G-Cyrillus Jun 06 '13 at 16:01
Maybe, summed up I need this: Pink part: rounder corners white part: rounded corners blue part: NO rounder corners – Raúl De Zamacona Jun 06 '13 at 16:05
Can you send me the link to the jsFiddle where is was rounded inside and square outside? I never saw that part. – Raúl De Zamacona Jun 06 '13 at 16:07
http://jsfiddle.net/ScndL/3 rd & http://jsfiddle.net/ScndL/4 th version gives it some depht – G-Cyrillus Jun 06 '13 at 16:16
Thanks for you answers, but I think I might go with a background image better, I think it is a better, more accurate solution. – Raúl De Zamacona Jun 06 '13 at 16:19
for sure, no matter how old is the browser then ;) – G-Cyrillus Jun 06 '13 at 16:47

Stylize scrollbar with two elements only

1 Answers1