更改scroll样式

Posted 进击的小牛牛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了更改scroll样式相关的知识,希望对你有一定的参考价值。

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 2px;  
    height: 80%;
    background: #fff;
}  
  
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  
    background-color: #F5F5F5;  
}  
  
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: #555;  
}  

注:不支持IE和ff浏览器!只能用插件(https://github.com/malihu/malihu-custom-scrollbar-plugin)

以上是关于更改scroll样式的主要内容,如果未能解决你的问题,请参考以下文章

Angular - 使用 ng 样式更改 css

方向更改时,片段视图为空

如何更改溢出 y 滚动条样式

微信小程序——点击切换样式scroll-view

自定义组件无法应用样式类,内置组件可以

tvos UISegmentedControl 焦点样式不变