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

IT技术 javascript html reactjs scroll scrollview
2021-05-17 13:33:44

我正在制作一个react应用程序，点击选择框下方的项目，下一部分中的相应项目将被滚动。

上述场景的工作示例： 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) -> 滚动元素也隐藏在标题后面。

预期结果：

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

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

当前工作示例：

编辑滚动到视图中的react（分叉）

1个回答

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

到外面 div

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

代码

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

在此处输入图片说明

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

其它你可能感兴趣的问题
上一篇React-Bootstrap Uncaught ReferenceError: require 未定义 下一篇webpack 5 module.hot 未定义