Html 自定义 Webkit 滚动条按钮

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26070489/
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 02:46:59  来源:igfitidea点击:

Custom Webkit Scrollbar Button

htmlcsswebkitscrollbar

提问by Clam

I am trying to figure out how to make the webkit scrollbar button appear. I'm testing this on safari on Mac.

我想弄清楚如何使 webkit 滚动条按钮出现。我正在 Mac 上的 safari 上对此进行测试。

I read these guides but I can't for the life of me figure out how to get a simple button to make it go up and down. I have an image that I was supposed to emulate, but no idea how. Can images be used as buttons? Example of image

我阅读了这些指南,但我终生无法弄清楚如何获得一个简单的按钮来使其上下移动。我有一个我应该模仿的图像,但不知道如何模仿。图像可以用作按钮吗?图像示例

!(http://oi62.tinypic.com/28kh76a.jpg)

!( http://oi62.tinypic.com/28kh76a.jpg)

http://css-tricks.com/custom-scrollbars-in-webkit/

http://css-tricks.com/custom-scrollbars-in-webkit/

Have this so far..

到目前为止有这个..

::-webkit-scrollbar {  
width: 12px;  
}  

::-webkit-scrollbar-track {
background-color: #fff;  
}

::-webkit-scrollbar-thumb {  
background-color: #81CFCC;  
height: 10px;

but don't know how to get the scroll buttons for up and down.. or how to style them.

但不知道如何获得向上和向下滚动按钮......或如何设置它们的样式。

回答by Brian Whitton

Use the ::-webkit-scrollbar-buttonselector and set its display to block. I wasn't getting buttons to show up until I set their display prop.

使用::-webkit-scrollbar-button选择器并将其显示设置为阻止。在我设置他们的显示道具之前,我没有让按钮显示出来。

回答by Blake

refer to this article, this is all you will need to know for webkit scrollbars

参考这篇文章,这就是你需要知道的关于 webkit 滚动条的全部内容

Custom Scrollbars in WebKit - Css Tricks

WebKit 中的自定义滚动条 - Css 技巧

EDIT 1

编辑 1

You could try something like this

你可以试试这样的

::-webkit-scrollbar-button {
  background: #444;
}

EDIT 2

编辑 2

hopefully this helps in some way

希望这在某种程度上有所帮助

http://jsfiddle.net/vfmfmaxo/

http://jsfiddle.net/vfmfmaxo/