ant-design icon indicating copy to clipboard operation
ant-design copied to clipboard

Table的Ref中的ScrollTo方法,在外层元素有滚动条时,使用scrollTo方法会导致外层同时滚动

Open codingCenterFar opened this issue 1 year ago • 2 comments

Reproduction link

Edit on CodeSandbox

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 -->

codingCenterFar avatar Dec 15 '23 03:12 codingCenterFar

看了一下应该是因为使用的 https://github.com/react-component/table 中的这部分 https://github.com/react-component/table/blob/master/src/Table.tsx#L331 使用了 scrollIntoView() 这个方法导致的

或者你可以添加 virtual 使用虚拟列表暂时解决

Fatpandac avatar Dec 27 '23 08:12 Fatpandac

我问一下。scrollTo 目前只可以滚动Y轴吗?我想X轴也滚动

zhangxinyong12 avatar Jan 09 '24 10:01 zhangxinyong12