滚动到视图元素隐藏在标题后面

Question

我正在制作一个反应应用程序，单击选择框下方的项目时，下一部分中的相应项目会滚动。

上述场景的工作示例： https://codesandbox.io/s/scroll-into-view-in-react-7xtq9

例如：单击项目二，然后其各自的字段集将滚动到顶部..

问题：

-> 现在的要求是我需要添加一个标题，并且在标题下方，两个部分都需要显示。

-> 我已将 style={{ marginTop: "100px" }} 添加到容器 div 中，例如，

   <div id="container" style={{ marginTop: "100px" }}>
    <div className="_2iA8p44d0WZ">
      <span className="chip _7ahQImy">Item One</span>
      <span className="chip _7ahQImy">Item Two</span>
      <span className="chip _7ahQImy">Item Three</span>
      <span className="chip _7ahQImy">Item Four</span>
      <span className="chip _7ahQImy">Item Five</span>
      <input
        type="text"
        className="searchBox"
        id="search_input"
        placeholder="Select"
        autoComplete="off"
        value=""
      />
    </div>
  </div>

-> 这使得容器显示在标题下方。

1) -> 但是当我点击任何项目时，这个container div 会隐藏在固定标题后面。

2) -> 滚动元素也隐藏在标题后面。

预期结果：

-> 容器部分和滚动元素需要从顶部可见，即使单击任何项​​目也是如此。

-> 简单来说不应该隐藏在header后面，需要显示在header下面。

当前工作示例：

Answer 1

我相信您需要将样式应用于包装您希望可滚动的容器的外部容器。这是div 呈现固定位置的标题和内容。

到外面div

1. 添加margin-top: 100px 以将内容下推。
2. 设置一个高度，限制内容仅自动扩展高度，height: calc(100vh - 100px)，即视图窗口的高度减去标题的高度。 注意：在代码和框中，我调整为 99vh 以防止窗口的滚动条出现，因此您可能需要为您的真实代码调整这些值。
3. 隐藏溢出内容，溢出时自动显示滚动条，overflow: auto。
4. 从内部内容 div 中删除内联 style 属性。

代码

<div
  style={{
    marginTop: "100px",
    height: "calc(99vh - 100px)",
    overflow: "auto"
  }}
>
  {/* Nav */}
  <div id="container">
    <div className="_2iA8p44d0WZ">
      // content
    </div>
  </div>
  {/* fieldsets */}
</div>