我尝试向滚动条的x
和y
轴添加箭头,这是我的滚动条:http://jsfiddle.net/Nk3NH/
我想要两个轴的箭头(图像):http://i.imgur.com/ygGobeC.png
我正在寻找添加像这样的箭头而不是上下的箭头。
答案 0 :(得分:23)
我一直在为你玩它。
首先,我将按钮设置为10px x 10px以使其更容易,并创建4个10×10个箭头,指向左,右,上和下。
然后我将background-size设置为100%,以正确缩放它。
然后,我使用:increment
,:decrement
,:horizontal
和:vertical
选择器为每个按钮设置正确的图像。
这些图片现在在我的公共保管箱上,但您可以添加自己的图片。
以下是更新后的代码:http://jsfiddle.net/Nk3NH/2/
我写的代码是:
::-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);
}
编辑: 通过添加这些样式来管理以获得彼此相邻的滚动按钮:
::-webkit-scrollbar-button:end {
display: block;
}
::-webkit-scrollbar-button:start {
display: none;
}
使用base64图像而不是损坏的链接更新了代码:
答案 1 :(得分:2)
::-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>");
}
答案 2 :(得分:2)
我想做同样的事情,但是不必为箭头使用背景图像。我的解决方案是使用重叠的背景渐变:
::-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;
}
答案 3 :(得分:0)
因为这是在Google上找到的第一个解决方案,所以当您在一个滚动条上显示多个按钮时遇到问题时,我将在此处保留此答案。
您必须添加以下行以隐藏其他按钮:
::-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;
}
答案 4 :(得分:-2)
只需添加:
::-webkit-scrollbar-thumb {
background-image:url( http://i.imgur.com/ygGobeC.png);
}