如何在React前端框架中设置自定义滚动条样式

科技 07-26 来源：高道天

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、局部配置

.sectionLeft{  width: 12%;  height: 100%;  overflow: hidden;  background-color: #fff;  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;    }  }}