滚动到 React 中的元素

Question

我在页面上的所有大节标题上都有一个参考。该页面很长，并且很好地通过了100vh。可滚动的部分是一个相当嵌套的 div，也带有一个 ref。鉴于节标题的引用和内部容器的引用（不能使用window.scrollTo 等），我如何构建“点击后转到部分”。

<div>
  <div>
    <button onClick={ // navigate to section }>Navigate</button>
  </div>
  <div>
    <div ref="inner_content">
      <h2 ref="section1">Section 1</h2>
      <h2 ref="section2">Section 2</h2>
      <h2 ref="section3">Section 3</h2>
    </div>
  </div>
</div>

// on navigate, I've tried things like this which have made the page scroll, but I can't understand which scroll/height properties I would need to access to pinpoint where the view should scroll too
this.refs.inner_content.scrollTop(this.refs.section1.getBoundingClientRect().top)

我一直无法找到一致的方法来使用参考部分上的scrollTop 和getBoundingClientRects().top。

Answer 1

我认为您可以使用旧方法从链接导航到某个部分 例如

这是我要导航的部分

<div id="section1">
 This is section 1
</div>

在我提供的锚链接上

 <a href="#section1">Section 1</a>