React中能否设置滚动条位置？如何实现75%横向滚动定位

完全可以实现，你之前的方案无效是因为操作对象错误——滚动行为由外层的div容器控制，而非内部的table元素。以下是具体实现步骤：

实现思路 #

1. 获取外层滚动容器的DOM引用，而非table的引用
2. 在组件挂载完成后，计算容器的可滚动宽度，设置scrollLeft为可滚动宽度的75%

修改后的完整代码 #

import { useRef, useEffect } from 'react';

const MyComponent = () => {
    // 创建滚动容器的引用
    const containerRef = useRef(null);

    useEffect(() => {
        const container = containerRef.current;
        if (!container) return;
        
        // 计算可滚动的总宽度：容器内容总宽度 - 容器可视宽度
        const scrollableWidth = container.scrollWidth - container.clientWidth;
        // 设置横向滚动到75%的位置
        container.scrollLeft = scrollableWidth * 0.75;
    }, []); // 空依赖数组确保只在组件挂载时执行一次

    return (
        <div
            ref={containerRef}
            style={{
                width: '300px',
                overflowX: 'scroll',
                overflowY: 'scroll',
                height: '300px',
            }}
        >
            <table style={{ width: '600px' }}>
                <thead>
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                        <th>Header 3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            Row 1, Column 1 - Lorem ipsum dolor sit amet,
                            consectetur adipiscing elit.
                        </td>
                        <td>
                            Row 1, Column 2 - Lorem ipsum dolor sit amet,
                            consectetur adipiscing elit.
                        </td>
                        <td>
                            Row 1, Column 3 - Lorem ipsum dolor sit amet,
                            consectetur adipiscing elit.
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Row 2, Column 1 - Lorem ipsum dolor sit amet,
                            consectetur adipiscing elit.
                        </td>
                        <td>
                            Row 2, Column 2 - Lorem ipsum dolor sit amet,
                            consectetur adipiscing elit.
                        </td>
                        <td>
                            Row 2, Column 3 - Lorem ipsum dolor sit amet,
                            consectetur adipiscing elit.
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    )
}

function App() {
    return (
        <div className='App'>
            <MyComponent />
        </div>
    )
}

export default App

关键说明 #

• scrollWidth：元素内容的总宽度（包括超出可视区域的部分）
• clientWidth：元素的可视宽度
• scrollLeft：元素横向滚动的距离，最大值为scrollWidth - clientWidth（即滚动到最右侧）

内容的提问来源于stack exchange，提问作者MOLLY