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

Question

我正在制作一个 React 应用程序，点击 select 框下方的项目，下一节中的相应项目就会滚动。

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

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

问题：

->现在的要求是我需要添加一个header，在header下面，两个部分都需要显示。

-> 我已将 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>

-> 这使得容器显示在 header.

下面

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

2) -> 滚动元素也隐藏在 header.

后面

预期结果：

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

-> 简单来说不应该躲在header后面，需要显示在header.

下面

当前工作示例：

Answer 1

我认为您需要将样式应用到包装您想要滚动的容器的外部容器。这是 div 呈现固定位置 header 和内容。

向外div

添加 margin-top: 100px 以向下推送内容。
设置一个限制内容自动扩展高度的高度，height: calc(100vh - 100px)，视图的高度window减去header的高度。 注意： 在 codesandbox 中我调整为 99vh 以防止 window 的滚动条出现，因此您可能需要调整这些值用于您的真实代码。
隐藏溢出内容，溢出时自动显示滚动条，overflow: auto.
从内部内容中删除 in-line style 属性 div。

代码

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

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

Scroll into view element hides behind header

html

javascript

scroll

scrollview

reactjs