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

debugcn 发表于 Dev

未定义

我正在做一个反应应用程序，在选择框下面的项目上单击，下一节中的相应项目将滚动。

上述情况的工作示例： 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） ->但是，当我单击任何项目时，此containerdiv就会隐藏在固定标题的后面。

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

预期结果：

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

->为简单起见，它不应隐藏在标题后面，而需要显示在标题下面。

当前的工作示例：

德鲁·里斯（Drew Reese）

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

到外面 div

添加margin-top: 100px将内容下推。
设置一个限制内容的高度，使其仅自动扩展height: calc(100vh - 100px)高度，即视图窗口的高度减去标题的高度。注意：在codesandbox中，我进行了调整，99vh以防止显示窗口的滚动条，因此您可能需要调整这些值才能使用实际代码。
隐藏溢出内容，并在发生溢出时自动显示滚动条overflow: auto。
style从内部内容中删除内置道具div。

码

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