javascript - 单击链接时让两个 div 滚动到不同的部分 - React

Question

我试图将我的页面分成两侧，当我单击一个链接时，我希望左侧向下滚动 n 数量，右侧和侧面滚动到不同的 n 数量。

我正在尝试使用 scrollToView 但这证明很困难。

  const test = useRef(null)
  const temp = useRef(null)

  useEffect(() => {
    test.current.scrollIntoView({ behavior: "smooth" })
    temp.current.scrollIntoView({ behavior: "smooth" })
  })
return (
<div>
  <div
    id="left"
    style={{
      width: "50%",
      float: "left",
    }}
  >
    <div
      style={{
        height: "95vh",
        overflow: "hidden",
      }}
    >
      <div id="okay" style={{ height: "95vh" }}>
        1
      </div>
      <div style={{ height: "95vh" }}>2</div>
      <div ref={test} style={{ height: "95vh" }}>
        3
      </div>
    </div>
  </div>

  <div id="right" style={{ width: "50%", float: "right" }}>
    <div
      style={{
        height: "95vh",
        overflow: "hidden",
      }}
    >
      <div id="okay" style={{ height: "95vh" }}>
        1
      </div>
      <div ref={temp} style={{ height: "95vh" }}>
        2
      </div>
      <div style={{ height: "95vh" }}>3</div>
    </div>
  </div>
</div>

)

例如，我希望左边滑到第三个 div，右边滑到第二个

标签： javascripthtmlcssreactjs