React中如何设置自定义滚动条样式
作者：sg_knight
这篇文章主要介绍了React中如何设置自定义滚动条样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
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;
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;
}
}
}react全局改变滚动条样式
/*整个滚动条*/
::-webkit-scrollbar {
width: 5px;
height: 8px;
background-color: #fff;
}
/*定义滚动条轨道*/
::-webkit-scrollbar-track {
background-color: #fff;
}
/*定义滑块*/
::-webkit-scrollbar-thumb {
background-color: #ACB1BF;
border-radius: 4px;
}把上述代码放入全局样式中即可生效
::-webkit-scrollbar— 整个滚动条.::-webkit-scrollbar-button— 滚动条上的按钮 (上下箭头).::-webkit-scrollbar-thumb— 滚动条上的滚动滑块.::-webkit-scrollbar-track— 滚动条轨道.::-webkit-scrollbar-track-piece— 滚动条没有滑块的轨道部分.::-webkit-scrollbar-corner— 当同时有垂直滚动条和水平滚动条时交汇的部分.::-webkit-resizer— 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。