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中多语言的配置方式
这篇文章主要介绍了React中多语言的配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
详解如何在React组件“外”使用父组件的Props
这篇文章主要介绍了详解如何在React组件“外”使用父组件的Props，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
详解React中的不可变值
这篇文章主要介绍了React中的不可变值的相关资料，帮助大家更好的理解和学习使用react.js，感兴趣的朋友可以了解下
2021-04-04
react代码分割的三种实现方法
React代码分割主要是为了优化首屏加载速度,避免一次性加载整个应用,把代码拆分成多个bundle,按需加载,下面就一起来了解一下,感兴趣的可以了解一下
2025-09-09
详解在React.js中使用PureComponent的重要性和使用方式
这篇文章主要介绍了详解在React.js中使用PureComponent的重要性和使用方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
React高级概念之Context用法详解
在React应用中，为了让数据在组件间共享，常见的方式是让它们以props的形式自顶向下传递，如果数据要在组件树不同层级共享，那么这些数据必须逐层传递直到目的地，Context如同管道，它将数据从入口直接传递到出口，使用Context能避免“prop-drilling”
2023-06-06
react native实现监控手势上下拉动效果
这篇文章主要为大家详细介绍了react native实现监控手势上下拉动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
React类组件更新的底层逻辑案例详解
这篇文章主要介绍了React类组件的更新过程,包括组件初始化、更新和卸载的生命周期方法,以及如何使用setState和forceUpdate来控制视图的更新,感兴趣的朋友一起看看吧
2025-01-01
React事件绑定的方式详解
react事件绑定时。this并不会指向当前DOM元素。往往使用bind来改变this指向，今天通过本文给大家介绍React事件绑定的方式，感兴趣的朋友
2021-07-07
React router动态加载组件之适配器模式的应用详解
这篇文章主要介绍了React router动态加载组件之适配器模式的应用 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-09-09