android短视频开发，React设置自定义滚动条样式

android短视频开发，React设置自定义滚动条样式

1、全局配置

 

在global.less文件添加如下配置

 

1	<br>/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/<br>::-webkit-scrollbar {<br>  width: 5px;<br>  height: 10px;<br>}<br>/*定义滑块 内阴影+圆角*/<br>::-webkit-scrollbar-thumb {<br>  background: rgba(0,0,0,0.2);<br>  border-radius: 10px;<br>}<br>/*定义滚动条轨道 内阴影+圆角*/<br>::-webkit-scrollbar-track {<br>  border-radius: 10px;<br>}

​

2、局部配置

 

在页面内部组件样式中，使用global配置

 

1

<br>.sectionLeft{<br>  width: 12%;<br>  height: 100%;<br>  overflow: hidden;<br>  <br>  border-radius: 5px;<br> <br>  :global {<br>    ::-webkit-scrollbar {<br>      width: 5px;<br>      height: 10px;<br>    }<br>    ::-webkit-scrollbar-thumb {<br>      background: rgba(0,0,0,0.1);<br>      border-radius: 10px;<br>    }<br>    ::-webkit-scrollbar-track {<br>      border-radius: 10px;<br>    }<br>  }<br>}

 

以上就是 android短视频开发，React设置自定义滚动条样式，更多内容欢迎关注之后的文章