html字母上方加箭头,html – 向滚动条添加箭头

我一直在为你玩它.

首先,我将按钮设置为10px x 10px以使其更容易,并创建4个10×10个箭头,指向左,右,上和下.

然后我将background-size设置为100％,以正确缩放它.

然后我使用：increment,：decrement,：horizo​​ntal和：vertical选择器为每个按钮设置正确的图像.

图像现在在我的公共DropBox上,但您可以添加自己的图像.

我写的代码是这样的：

::-webkit-scrollbar-button {

background-size: 100%;

height: 10px;

width: 10px;

-webkit-Box-shadow: inset 1px 1px 2px rgba(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图像更新代码而不是损坏的链接：