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

发布时间 2023-09-06 14:12:05作者: 云豹科技-苏凌霄

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设置自定义滚动条样式,更多内容欢迎关注之后的文章