Adding arrows to scrollbar

Question

I'm trying to add arrows to the x and y axes of the scrollbar, here's my scrollbar: http://jsfiddle.net/Nk3NH/ And I want this arrow(image) for the two axes: https://i.stack.imgur.com/i6Un2.png I'm looking for the code that add the arrows like that enter image description here and not up and down.

score 28 · Accepted Answer · edited Sep 28 '17 at 19:40

28

I've been playing around with it for you. First I set the buttons to be 10px x 10px to make it easier, and created 4 10 by 10 arrows pointing left, right, up and down. Then I set the background-size to be 100%, to scale it correctly. Then i set the correct image to each button using, the :increment, :decrement, :horizontal and :vertical selectors. The images are on my public dropbox right now, but you can add your own.

Here's the updated code: http://jsfiddle.net/Nk3NH/2/

the code I wrote was this:

::-webkit-scrollbar-button {
    background-size: 100%;
    height: 10px;
    width: 10px;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}

::-webkit-scrollbar-button:horizontal:increment {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon2.png);
}

::-webkit-scrollbar-button:horizontal:decrement {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon4.png);
}

::-webkit-scrollbar-button:vertical:increment {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon3.png);
}

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon.png);
}

EDIT: Managed to get the scroll buttons next to each other as OP wanted by adding these styles:

::-webkit-scrollbar-button:end {
    display: block;
}

::-webkit-scrollbar-button:start {
    display: none;
}

http://jsfiddle.net/Nk3NH/4/

Updated code with base64 images instead of broken links:

http://jsfiddle.net/burkybang/1z7vgfpt/

edited Sep 28 '17 at 19:40

burkybang

107
2
10

answered May 26 '13 at 17:53

covet-cubby

428
4
9

Sorry but this code isn't exactly what I need because I want the buttons as I said to be like that: http://i.imgur.com/aMl9c6y.gif If you did it I will give you 20 reputation.. – user2401856 May 26 '13 at 17:59
Yeah I know that you wrote it yourself, don't worry you will get 20 reputation for that if you make what I asked you to ;) – user2401856 May 26 '13 at 18:06
Sorry Misunderstood for a sec – covet-cubby May 26 '13 at 18:17
Sorry, I've been trying for ages and can't seem to get the double buttons, I might try again tommorow. :( – covet-cubby May 26 '13 at 18:50
Ok, I will give you even 30 reputation if you do it, now I will give you just 10 but if you didn't do it for me till tomorrow or after to days max I may get back the 10 reputation.. – user2401856 May 26 '13 at 18:56
ok, ill try to remember to, but to be honest i dont care about the points so you dont need to give them – covet-cubby May 26 '13 at 19:16
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/30654/discussion-between-chaz2041-and-user2401856) – covet-cubby May 26 '13 at 19:28
1

Pleasure, I actually learned a lot about WebKit scrollbars myself while do doing it – covet-cubby May 27 '13 at 06:28

score 8 · Answer 2 · answered Oct 19 '18 at 15:45

I wanted to do the same thing, but without having to use background-images for the arrows. My solution is to use overlapping background gradients:

::-webkit-scrollbar-button:vertical:start:decrement {
    background:
        linear-gradient(120deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(240deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(0deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}

::-webkit-scrollbar-button:vertical:end:increment {
    background:
        linear-gradient(300deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(60deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(180deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}

::-webkit-scrollbar-button:horizontal:end:increment {
    background:
        linear-gradient(210deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(330deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(90deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}

::-webkit-scrollbar-button:horizontal:start:decrement {
    background:
        linear-gradient(30deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(150deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(270deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}

score 5 · Answer 3 · answered Aug 26 '18 at 17:45

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a6268'><polygon points='0,50 100,50 50,0'/></svg>");
}

::-webkit-scrollbar-button:vertical:increment {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a6268'><polygon points='0,0 100,0 50,50'/></svg>");
}

http://jsfiddle.net/2aHeE/5227/

This is my favorite solution, because it works with simple vector graphics generated on the fly. — SBS, Jun 29 '20 at 20:54

score 0 · Answer 4 · answered May 18 '20 at 07:11

Because this is the first solution found on Google, when you have problems showing multiple buttons on one scrollbar, I will leave this answer here.
You have to add this lines to hide the extra buttons:

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
  width: 0;
  height: 0;
}

score -2 · Answer 5 · answered May 26 '13 at 17:32

-2

Just add:

::-webkit-scrollbar-thumb {
    background-image:url( http://i.imgur.com/ygGobeC.png);
}

answered May 26 '13 at 17:32

Abdallah Barghouti

85
1
2
12

Unfortunately it's incomplete code because it adds the same image to the two axes in the both directions up and down and that not exactly what I want – user2401856 May 26 '13 at 17:35
Not about the question but this answer helped in my own problem about css thumb image ... thankx BTW... – mohitesachin217 Sep 03 '19 at 15:12

Adding arrows to scrollbar

5 Answers5

Linked