javascript - 如何让滚动条在 React 页面加载时的某个位置开始

Question

我有一个非常宽的图像作为背景，比如说 4000 像素。

我想让我的 React 页面加载到图像的中间，2000px。

如何让我的页面在页面加载时以 2000px 宽度自动启动？

标签： javascriptcssreactjs

Answer 1

实现这一点的动态方法是使用 ref。我们可以创建一个回调函数，它接受一个我们分配给您的图像容器的 ref。这样，我们可以在创建 ref 后立即对其做出反应。

该函数将动态计算滚动位置并显式设置scrollLeft。该函数可能如下所示

  const refAssignCallback = (ref) => {
    if (ref) {
      //ref available = mounted.
      var element = ref;
      var scrollWidth = element.scrollWidth;
      var clientWidth = element.getBoundingClientRect().width;

      //explicitly set the scrollTop position of the scrollContainer
      element.scrollLeft = (scrollWidth - clientWidth) / 2;
    } 
  }; 

应该将此 refAssignmentCallback 传递给图像容器的 ref 属性。

下面是完整的片段

import React from "react";
import "./styles.css";

export default function App() {

  const refAssignCallback = (ref) => {
    if (ref) {
      //the containerRef is currently null, ref available = mounted.
      var element = ref;
      var scrollWidth = element.scrollWidth;
      var clientWidth = element.getBoundingClientRect().width;

      //explicitly set the scrollTop position of the scrollContainer
      element.scrollLeft = (scrollWidth - clientWidth) / 2;
    } 
  }; 

  return (
    <div className="App">
      <div name="container" ref={refAssignCallback} style={{overflowX: "auto"}}>
        <div style={{width: "4000px"}}>Image Placeholder Div</div>
      </div>
    </div>
  );
}

代码沙盒