html - スクロールバーに矢印を追加する

Question

xスクロールバーの軸に矢印を追加しようとしています。これyが私のスクロールバーです:http: //jsfiddle.net/Nk3NH/ そして、2つの軸にこの矢印(画像)が必要です: http://i.imgur。 com/ygGobeC.png上下ではなく 、そのような矢印を追加するコードを探しています。

Answer 1

同じことをしたかったのですが、矢印に背景画像を使用する必要はありませんでした。私の解決策は、重複する背景グラデーションを使用することです:

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

Answer 2

追加するだけです：

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