ant-design Scrollbar Issue on Table elements on iPad Devices

goucqfw6  于 4个月前  发布在  其他
关注(0)|答案(2)|浏览(37)

https://www.loom.com/share/3f31bf796eb5405aabf435475981f637?sid=dc5790a9-6e01-4433-b3bc-036f44815568

Steps to reproduce

  1. Open Antd docs https://ant.design/components/table#components-table-demo-grouping-columns
  2. 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
  3. 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 |

nzkunb0c

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.xantd@4.x 的 codesandbox,或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。
什么是最小化重现,为什么这是必需的?

tvz2xvvm

tvz2xvvm2#

根据您的描述,问题是在iPad设备上的表格元素中出现滚动条问题。根据提供的代码片段,您可以使用 virtual 属性来启用表格的虚拟滚动功能,并保持原始表格的功能正常工作(除了自定义的 components.body 之外)。

对于固定列的问题,在v4版本中,我们使用了 position: sticky 样式来实现表格的固定列效果。这个CSS属性允许您在滚动时将元素固定在某个位置,避免了v3版本需要渲染额外的表格来实现固定列的效果。

如果需要叠加固定列,您只需要配置不同的偏移量即可实现。在虚拟滚动中,我们同样可以利用这个特性,通过复用 sticky 样式来实现固定列的效果。而 rc-virtual-list 只需要提供水平滚动,而不需要关心固定列的实现。

希望以上回答能解决您的问题。如果您还有其他疑问,请随时向我提问。

相关问题