Reproduction link
https://www.loom.com/share/3f31bf796eb5405aabf435475981f637?sid=dc5790a9-6e01-4433-b3bc-036f44815568
Steps to reproduce
- Open Antd docs https://ant.design/components/table#components-table-demo-grouping-columns
- Go to the table and scroll up and down, you can notice that the scrollbar is glitchy especially if the table is scrollable horizontally too
- Check this with an Ipad device. (I tested on iPad Pro 12.9 2020)
What is expected?
It is expected the scrollbar to scroll smoothly, same as it does for other devices
What is actually happening?
It glitches
| Environment | Info |
| ------------ | ------------ |
| antd | 4.24.3 |
| React | 18.2.0 |
| System | MacOs |
| Browser | Safari and Chrome |
2条答案
按热度按时间nzkunb0c1#
Hello @Noraisn. Please provide a online reproduction by forking codesandbox of antd@5.x or antd@4.x , or provide a minimal GitHub repository. Issues labeled by
Need Reproduce
will be closed if no activities in 3 days.你好 @Noraisn,我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 antd@5.x 或 antd@4.x 的 codesandbox,或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。
什么是最小化重现,为什么这是必需的?
tvz2xvvm2#
根据您的描述,问题是在iPad设备上的表格元素中出现滚动条问题。根据提供的代码片段,您可以使用
virtual
属性来启用表格的虚拟滚动功能,并保持原始表格的功能正常工作(除了自定义的components.body
之外)。对于固定列的问题,在v4版本中,我们使用了
position: sticky
样式来实现表格的固定列效果。这个CSS属性允许您在滚动时将元素固定在某个位置,避免了v3版本需要渲染额外的表格来实现固定列的效果。如果需要叠加固定列,您只需要配置不同的偏移量即可实现。在虚拟滚动中,我们同样可以利用这个特性,通过复用
sticky
样式来实现固定列的效果。而rc-virtual-list
只需要提供水平滚动,而不需要关心固定列的实现。希望以上回答能解决您的问题。如果您还有其他疑问,请随时向我提问。