向滚动条添加箭头 [英] 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: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);
}
编辑:
管理让滚动按钮彼此相邻因为OP想要添加这些样式:
:: - webkit-scrollbar-button:end {
display:block ;
}
:: - webkit-scrollbar-button:start {
display:none;
}
使用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;
}
Updated code with base64 images instead of broken links:
http://jsfiddle.net/burkybang/1z7vgfpt/
这篇关于向滚动条添加箭头的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!