浏览器如何设置css滚动条样式

浏览器如何设置css滚动条样式

苹果手机H5的滚动条都是默认隐藏的，今天提出一个需求，需要一直显示苹果的滚动条，找了很多教程，在这里记录下

/*以下为滚动条组成部分*/
/*滚动条整体部分*/
::-webkit-scrollbar {
    /*隐藏默认的滚动条。*/
    -webkit-appearance: none;
}
/*滚动条里面的小方块，能向上向下移动（或向左向右移动）*/
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, .5);
}
/*滚动条的轨道（里面装有Thumb）*/
::-webkit-scrollbar-track{
​
}
/*滚动条的轨道的两端按钮，由于通过点击微调小方块的位置*/
::-webkit-scrollbar-button{
​
}
/*内层轨道，滚动条中间部分*/
::-webkit-scrollbar-track-piece{
​
}
/*边角，即垂直滚动条和水平滚动条相交的地方*/
::-webkit-scrollbar-corner{
​
}
/*两个滚动条的交汇处上用于拖动调整元素大小的小控件*/
::-webkit-resizer{
​
}
​
/*以下为滚动条设置的伪类，需要与上面结合才可以使用*/
/*伪类适用于任何水平方向上的滚动条 */
:horizontal  
​
/*伪类适用于任何垂直方向的滚动条*/
:vertical  
//vertical  
/*伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮*/
:decrement  
​
/*伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮*/
:in