React：[useRef, scrollIntoView,] 如何仅在溢出页面内自动滚动特定的 div？

Question

正如您在我的示例中看到的那样

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

function App() {
  const items = ["this", "that", "those", "them", "these", "thisins"];

  const messagesRef = React.useRef(null);
  const scrollToBottom = () => {
    messagesRef.current.scrollIntoView({
      behavior: "smooth"
    });
  };

  React.useEffect(() => {
    if (messagesRef.current) {
      scrollToBottom();
    }
  }, [messagesRef]);

  return (
    // Page is overflowing, set height to mimic a full page
    <div className="App" style={{ marginTop: 70, height: 800 }}>
      {/* now set this div to overflow scroll with a small height */}
      <div style={{ overflowY: "scroll", height: 200, border: "solid" }}>
        {items.map(elem => (
          <div style={{ border: "solid", borderColor: "green", padding: 20 }}>
            {elem}
          </div>
        ))}
        {/* Set last element within this div to be the ref to scroll to */}
        <div ref={messagesRef} />
      </div>
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

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

页面加载，页面和嵌套滚动都div自动滚动。

我想做的只是 scrollIntoView 我设置为参考的溢出 div。

我正在定位 ref，它正在工作，但我如何不滚动父元素？

Answer 1

试试这个：

   messagesRef.current.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "start"
    });

Answer 2

我在使用上述配置滚动到顶部时遇到问题。我刚刚添加了行为：“平滑”选项并且效果很好:)

创建元素的引用：

const recogRef = useRef();

我在检查 onClick 事件的 userActions 方法中的 switch 语句中有这个：

case "recognition":
  recogRef.current.scrollIntoView({
    behavior: "smooth",
  });
  break

然后将 ref 添加到要滚动到的元素：

<h3 ref={recogRef} className="m-0">
  Recognitions for {`${participant.firstName}`}
</h3>

注意，这是在 Object.keys(obj).map 方法中
然后是触发动作调用的元素：

<div
  key={key}
  onClick={() => userActions(key)}
  className="user_action d-flex align-items-center justify-content-center"
>
  <p className="mb-0 ms-1 fw-bold">{actions[key].label<}/p>
</div>

React：[useRef, scrollIntoView,] 如何仅在溢出页面内自动滚动特定的 div？

React: [useRef, scrollIntoView,] How to only autoscroll a specific div inside of an overflowing page?

javascript

scroll

reactjs

js-scrollintoview

react-hooks