向滚动条添加箭头 [英] Adding arrows to scrollbar

问题描述

我试图向箭头添加滚动条的 x 和 y 轴，这里是我的滚动条：

代码I写的是这样的：

$ p $ :: 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：horizo​​ntal：increment {
background-image：url（https://dl.dropboxusercontent.com/u/55165267/ icon2.png）;
}

:: - webkit-scrollbar-button：horizo​​ntal：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）;
}


编辑：
管理让滚动按钮彼此相邻因为OP想要添加这些样式：

  ::  -  webkit-scrollbar-button：end {
 display：block ; 
} 
 
 ::  -  webkit-scrollbar-button：start {
 display：none; 
} 
  

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

使用base64图片更新代码，而不是断开链接：

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

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: http://i.imgur.com/ygGobeC.png I'm looking for the code that add the arrows like that and not up and down.

解决方案

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/

这篇关于向滚动条添加箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！