网站可以在React中设置滚动条位置吗？

Question

React中网站可以设置滚动条位置吗？

我想在用户进入网站时设置水平滚动条75%的标签。

我想知道网络是否这样做？以及如何做。

我要求chatgpt，但它的答案不起作用。（它提供了类似

tableRef.current

，

table.scrollLeft = table.scrollWidth - table.clientWidth;

，）

代码如下：

const MyComponent = () => {
    return (
        <div
            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

期望是：

Answer 1

ChatGpt 走在正确的轨道上，您没有显示它创建的代码，所以不确定哪里错了。

但是您基本上可以混合使用

ref

和

useEffect

来直接更改 DOM 元素。

示例。

function BoxWithScroll() {
  const boxRef = React.createRef();
  React.useEffect(() => {
    boxRef.current.scrollLeft = 
      (boxRef.current.scrollWidth-
      boxRef.current.clientWidth)*0.75;   
  }, []);
  return <div ref={boxRef} id="box">
    <div id="box-inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500  
    </div>
  </div>
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<BoxWithScroll/>);

#box {
  width: 200px;
  height: 150px;
  background-color: pink;
  overflow-x: scroll;
}

#box-inner {
  width: 400px;
  height: 100px;
  background-color: red;
  color: white;
}

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<div id="root"></div>