7

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

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://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.

Clam
  • 935
  • 1
  • 12
  • 24

2 Answers2

5

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

Brian Whitton
  • 364
  • 1
  • 10
  • There's compatibility problems. The webkit-scrollbar-button works only with ChromenOpera and Safara, but not Firefox or Edge/IE. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar – Quidam Mar 02 '19 at 20:18
2

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

Custom Scrollbars in WebKit - Css Tricks

EDIT 1

You could try something like this

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

EDIT 2

hopefully this helps in some way

http://jsfiddle.net/vfmfmaxo/

Blake
  • 561
  • 5
  • 14