【React】Ant Design 5.x版本table scroll滚动条样式自定义

最新推荐文章于 2025-03-25 19:10:11 发布
最新推荐文章于 2025-03-25 19:10:11 发布
阅读量3k 收藏 1
点赞数 13
分类专栏： Web前端 # React 文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011159821/article/details/139197222
版权

新版里table的滚动条样式由:scrollbar-width、scrollbar-color接管，导致之前的伪类方式失效！

环境

  • antd: ^5.14.1
  • react: ^18

解决方案：

若想延续伪类方式修改滚动条样式，可以在定义伪类样式文件里加入以下片段：

.ant-table-body {
   
  scrollbar-width: auto;
  scrollbar-color: auto;
}

完整设置如下：

.ant-table-body {
最低0.47元/天 解锁文章
react 中ant design table 表格组件滚动条监听方法
Mrluog的博客
12-09 3904
react 中ant design table 表格组件滚动条监听方法
Antd table滚动高度动态获取自定义hooks useScrollY
看陌生的风景的博客
05-11 439
【代码】Antd table滚动高度动态获取自定义hooks useScrollY。
【React】React中如何修改antd 5 table组件滚动条样式
最新发布
Zacks_xdc的博客
03-25 429
Antd 5 版本的table组件滚动条变成默认滚动条，手动覆盖使样式美观一些。
css增加横着滚动条_CSS 设置滚动条样式的实现
weixin_39560604的博客
12-20 1209
webkit滚动条样式重置1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。2、scrollbar corner为横向和竖向的交叉角区域3、resize用来设置滚动条的交汇处上用于拖动调整元素大小的小控件组成结构图如下：一旦发现滚动条的自定义样式，浏览器...
react-reactscrollbarReact的滚动条组件
08-15
react-scrollbar - React的滚动条组件
React+Antd修改Table组件滚动条样式
阿宝的博客
12-13 574
React+Antd修改Table组件滚动条样式。
修改Ant Design 组件库里面的Table里面的滚动条的样式
weixin_38694789的博客
01-15 4579
想修改Ant Design组件库里面Table里面的滚动条的样式： .userlist{ clear: both; height: 82%; width:94%; padding: 20px; overflow: hidden; overflow-y: scroll; } .userlist::-webkit-scrollbar { width: 4px; ...
antd-5版本table组件修改滚动条样式不生效问题
前端三脚猫的博客
08-05 932
在react项目中使用antd-ProComponents组件库的Protable组件时修改table自带的滚动条样式不生效。
react自定义swiper滚动条
行路-前端的博客
07-20 563
react,自定义swiper滚动条 初始化数据 constructor(props) { super(props) this.state = { curIdx: 0, index: 0, data:[] } } 函数作用类似vue中数据绑定 handleSwiperChange = (e) => { const { current } = e.detail this.setState({ c
antdesign 添加滚动条，固定操作列，修改滚动条样式
11-11
Ant Design 滚动条添加与样式修改 ...我们可以通过使用 Ant Design 的 `a-table` 组件和 CSS 伪元素来添加滚动条、固定操作列、修改滚动条样式。这些技术可以帮助我们快速构建高效的数据表格，并提供更好的用户体验。
react-基于react的自定义滚动条组件
08-14
基于react的自定义滚动条组件
react-reactcustomscrollbarsReact滚动条组件
08-15
react-custom-scrollbars - React滚动条组件
react-scrollbars-custom:最好的React自定义滚动条组件
05-02
react-scrollbars-custom ×× ×× 本机浏览器的滚动行为-它不模拟滚动，仅显示自定义滚动条，仍以本机滚动 跨浏览器和跨平台-无关紧要的地方和方式，滚动条在各处看起来都一样 终极性能-60 FPS（使用RAF）和高度优化的代码 无需额外的样式表-现成的内联样式最少，也可以根据需要自己设置样式 完全可定制-想要河马作为滚动条拇指吗？ 好吧..我不判断你，你有空做！ 滚动条嵌套 总测试覆盖率 iOS的动量滚动 RTL支持（） 内容大小翻译（） 正确的页面缩放处理（不显示本地滚动条） 安装 npm install react-scrollbars-custom # or via yarn yarn add react-scrollbars-custom 安装注意事项： 该库是用ES6 +编写的，并提供了已编译和未编译的版本： package.json mai
react-reactcustomscroll利用原生OS滚动行为轻松定制浏览器滚动条
08-15
react-custom-scroll - 利用原生OS滚动行为轻松定制浏览器滚动条
react-custom-scroller:超级简单的React组件，用于创建自定义滚动条跨浏览器和跨设备
05-06
React自定义卷轴 超级简单的React组件，用于创建自定义滚动条跨浏览器和跨设备。 。 有兴趣从事这样的项目吗？ 正在寻找加入我们的团队！ 安装 yarn add react-custom-scroller 好处 极其轻巧（压缩后不到2KB）。 它使用本机滚动事件，因此所有事件都可以正常工作（鼠标滚轮，空格，向下翻页，向上翻页，箭头等）。 没有其他第三方依赖。 表现极好！ 用法 import React from 'react' ; import CustomScroller from 'react-custom-scroller' ; const MyScrollableDiv = ( ) => ( < CustomScroller> Content goes here. < / CustomScroller > ) ; 执照 麻省理工学院:copyright:
ant design 监听Table 组件 滚动到底部
cofecode的博客
01-12 3307
import React, { useRef, forwardRef, useState, useEffect } from 'react' import { useMount, useMouse, useDebounceFn } from 'ahooks'; import { Table, Tag, Space } from 'antd'; function test() { const dataSource = [ { key: '1', name: '胡彦斌',
antd table 表格滚动条的样式
m0_66698608的博客
08-31 926
【代码】antd table 表格滚动条的样式。
推荐开源项目：react-custom-scrollbars - 自定义滚动条组件
gitblog_00022的博客
05-11 807
推荐开源项目：react-custom-scrollbars - 自定义滚动条组件 项目地址:https://gitcode.com/gh_mirrors/re/react-custom-scrollbars 1、项目介绍 react-custom-scrollbars 是一款基于 React 的高度可定制化滚动条组件库。它允许你在保持原生浏览器滚动体验的同时，为你的应用提供美观和功能丰富的自定义...
react antdesign table表格列数多 横向滚动条 把内容挤的很窄怎么解决
06-01
可以尝试以下几种方案： 1. 设置列宽：可以通过设置每一列的宽度来避免内容被挤窄。可以使用 `fixed` 属性来固定每一列的宽度，或者使用 `width` 属性来设置每一列的具体宽度。 2. 设置表格宽度：可以通过设置整个表格的宽度来使表格更宽，可以使用 `scroll` 属性来添加横向滚动条。例如： ```jsx <Table scroll={{ x: true }} ... /> ``` 这将会使表格出现横向滚动条，当列数过多时用户可以通过滚动条来查看所有列。 3. 使用响应式表格：Ant Design 还提供了响应式表格的组件 `ResponsiveTable`，它可以根据屏幕大小自动适应表格宽度和列数。例如： ```jsx <ResponsiveTable columns={columns} dataSource={data} ... /> ``` 这个表格组件会根据屏幕大小自动调整列数和宽度，以保证表格在不同的设备上都能正确显示。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

转悠的陀螺

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值