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.sstatic.net/i6Un2.png I'm looking for the code that add the arrows like that and not up and down.

Hyetograph

Answer 1

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/

The

Sorry but this code isn't exactly what I need because I want the buttons as I said to be like that: i.imgur.com/aMl9c6y.gif If you did it I will give you 20 reputation.. – Hyetograph

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 ;) – Hyetograph

Sorry Misunderstood for a sec – The

Sorry, I've been trying for ages and can't seem to get the double buttons, I might try again tommorow. :( – The

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.. – Hyetograph

ok, ill try to remember to, but to be honest i dont care about the points so you dont need to give them – The

let us continue this discussion in chat – The

Pleasure, I actually learned a lot about WebKit scrollbars myself while do doing it – The

Answer 2

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;
}

Labefaction

Answer 3

::-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/

Sansculotte

This is my favorite solution, because it works with simple vector graphics generated on the fly. – Swinger

Answer 4

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;
}

Berri

Answer 5

Just add:

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

Autocatalysis

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 – Hyetograph

Not about the question but this answer helped in my own problem about css thumb image ... thankx BTW... – Altdorf