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-native WebView 返回处理(非回调方法可解决)
这篇文章主要介绍了详解react-native WebView 返回处理(非回调方法可解决)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
reactjs学习解决unknown at rule @tailwind css
这篇文章主要介绍了reactjs学习解决unknown at rule @tailwind css问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要为大家详细介绍了React中项目路由配置与跳转方法的相关资料，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以了解一下2023-08-08
这篇文章主要介绍了react中的props 的使用及进行限制的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要介绍了React+Koa实现文件上传的示例，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了自己动手封装一个React Native多级联动，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
使用redux管理数据，由于Store独立于组件，使得数据管理独立于组件，解决了组件之间传递数据困难的问题，非常好用，今天重点给大家介绍使用react+redux实现计数器功能及遇到问题，感兴趣的朋友参考下吧2021-06-06
React中使用Echarts无法显示title、tooltip等组件的解决方案
这篇文章主要介绍了React中使用Echarts无法显示title、tooltip等组件的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
简单说React.memo()是通过校验props中的数据是否改变的来决定组件是否需要重新渲染的一种缓存技术,下面这篇文章主要给大家介绍了关于如何快速学会react中useMemo的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要为大家介绍了React Context原理深入理解源码示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
最新评论