React中如何设置自定义滚动条样式
更新时间：2023年11月14日 09:58:05 作者：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的可拖动按钮).
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了React实现导入导出Excel文件，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2021-07-07
这篇文章主要为大家详细介绍了使用react+redux实现弹出框案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
在react-router4中进行代码拆分的方法（基于webpack）
这篇文章主要介绍了在react-router4中进行代码拆分的方法（基于webpack），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家介绍了React Fiber构建completeWork源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了React 代码共享最佳实践方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-05-05
这篇文章主要为大家介绍了官方回答在React18中请求数据的正确姿势详解，同样也适用其他框架，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
浅谈react-router HashRouter和BrowserRouter的使用
本篇文章主要介绍了浅谈react-router HashRouter和BrowserRouter的使用，具有一定的参考价值，有兴趣的可以了解一下2017-12-12
之前一直想用Canvas做表格渲染的,最近发现了一个很不错的Canvas绘图框架Leafer,api很友好就试着写了一下,文中有详细的代码示例供大家参考,感兴趣的小伙伴可以自己动手试试2023-09-09
react 自 16.8 开始，引入了 Hooks 概念，使得函数组件中也可以拥有自己的状态，并且可以模拟对应的生命周期，这篇文章主要介绍了使用 React hooks 怎么实现类里面的所有生命周期,需要的朋友可以参考下2023-02-02
本篇文章主要介绍了详解React native全局变量的使用(跨组件的通信)，具有一定的参考价值，有兴趣的同学可以了解一下2017-09-09
最新评论