Html 向滚动条添加箭头

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16761611/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:46:07  来源:igfitidea点击:

Adding arrows to scrollbar

htmlcssscrollbararrows

提问by user2401856

I'm trying to add arrows to the xand yaxes 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.pngI'm looking for the code that add the arrows like that enter image description hereand not up and down.

我正在尝试向滚动条的xy轴添加箭头,这是我的滚动条:http: //jsfiddle.net/Nk3NH/我想要两个轴的箭头(图像):http://i.imgur。 com/ygGobeC.png我正在寻找添加这样的箭头在此处输入图片说明而不是上下箭头的代码。

回答by charlie-g-cowan

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, :horizontaland :verticalselectors. The images are on my public dropbox right now, but you can add your own.

我一直在为你玩弄它。首先,我将按钮设置为 10px x 10px 以使其更容易,并创建了 4 个 10 x 10 箭头,指向左、右、上和下。然后我将背景大小设置为 100%,以正确缩放。然后,我使用的正确的图像设置为每个按钮:increment:decrement:horizontal:vertical选择器。这些图像现在在我的公共保管箱中,但您可以添加自己的。

Here's the updated code: http://jsfiddle.net/Nk3NH/2/

这是更新的代码: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:

编辑:通过添加这些样式,按照 OP 的需要,设法使滚动按钮彼此相邻:

::-webkit-scrollbar-button:end {
    display: block;
}

::-webkit-scrollbar-button:start {
    display: none;
}

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

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

Updated code with base64 images instead of broken links:

使用 base64 图像而不是断开的链接更新代码:

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

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

回答by BevansDesign

I wanted to do the same thing, but without having to use background-images for the arrows. My solution is to use overlapping background gradients:

我想做同样的事情,但不必为箭头使用背景图像。我的解决方案是使用重叠的背景渐变:

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

回答by DanCZ

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

http://jsfiddle.net/2aHeE/5227/

http://jsfiddle.net/2aHeE/5227/

回答by FleMo

Because this is the first solution found on Google, when you have problems showing multiple buttons on one scrollbar, I will leave this answer here.
You have to add this lines to hide the extra buttons:

因为这是在 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;
}

回答by Abdallah Barghouti

Just add:

只需添加:

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