android短视频开发,React设置自定义滚动条样式
android短视频开发,React设置自定义滚动条样式
1、全局配置
在global.less文件添加如下配置
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 5px;
height: 10px;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.2);
border-radius: 10px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
border-radius: 10px;
}
2、局部配置
在页面内部组件样式中,使用global配置
.sectionLeft{
width: 12%;
height: 100%;
overflow: hidden;
border-radius: 5px;
:global {
::-webkit-scrollbar {
width: 5px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.1);
border-radius: 10px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
}
}
}
以上就是 android短视频开发,React设置自定义滚动条样式,更多内容欢迎关注之后的文章