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