ant-design
ant-design copied to clipboard
Table的Ref中的ScrollTo方法,在外层元素有滚动条时,使用scrollTo方法会导致外层同时滚动
Reproduction link
Steps to reproduce
import React, { useRef } from "react";
import "./index.css";
import { Table, Button } from "antd";
const columns = [
{
title: "Full Name",
width: 100,
dataIndex: "name",
key: "name",
fixed: "left",
},
{
title: "Age",
width: 100,
dataIndex: "age",
key: "age",
fixed: "left",
},
{
title: "Column 1",
dataIndex: "address",
key: "1",
width: 150,
},
{
title: "Column 2",
dataIndex: "address",
key: "2",
width: 150,
},
{
title: "Column 3",
dataIndex: "address",
key: "3",
width: 150,
},
{
title: "Column 4",
dataIndex: "address",
key: "4",
width: 150,
},
{
title: "Column 5",
dataIndex: "address",
key: "5",
width: 150,
},
{
title: "Column 6",
dataIndex: "address",
key: "6",
width: 150,
},
{
title: "Column 7",
dataIndex: "address",
key: "7",
width: 150,
},
{
title: "Column 8",
dataIndex: "address",
key: "8",
},
{
title: "Action",
key: "operation",
fixed: "right",
width: 100,
render: () => <a>action</a>,
},
];
const data = [];
for (let i = 0; i < 100; i ) {
data.push({
key: i,
name: `Edward ${i}`,
age: 32,
address: `London Park no. ${i}`,
});
}
const App = () => {
let tableRef = useRef(null);
return (
<div className="container">
<Button
onClick={() => {
tableRef.current.scrollTo({
index: 2,
});
}}
>
滚动到第二行
</Button>
<Table
ref={tableRef}
columns={columns}
dataSource={data}
scroll={{
x: 1500,
y: 300,
}}
/>
</div>
);
};
export default App;
``
### What is expected?
只有表格内滚动,而不是连同外层元素一起滚动
### What is actually happening?
外层元素和表格行同时滚动
| Environment | Info |
| --- | --- |
| antd | 5.12.2 |
| React | 18 |
| System | window10 |
| Browser | edge/chrome 120 |
<!-- generated by ant-design-issue-helper. DO NOT REMOVE -->
看了一下应该是因为使用的 https://github.com/react-component/table 中的这部分 https://github.com/react-component/table/blob/master/src/Table.tsx#L331 使用了 scrollIntoView()
这个方法导致的
或者你可以添加 virtual
使用虚拟列表暂时解决
我问一下。scrollTo 目前只可以滚动Y轴吗?我想X轴也滚动