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

问题描述 投票:0回答:2

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

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

预期结果:

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

-> 简单来说,它不应该隐藏在标题后面,需要显示在标题下方。

当前工作示例:

Edit scroll-into-view-in-react (forked)

javascript html reactjs scroll scrollview
2个回答
1
投票

我相信您需要将样式应用到包装您想要滚动的容器的外部容器。这是

div
渲染固定位置标题和内容。

到外面

div

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

代码

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

enter image description here

Edit scroll-into-view-element-hides-behind-header


0
投票

(对于谷歌同事)另一个对我有用的更简单的解决方案:将对

scrollIntoView()
的调用调整为更具防御性的调用:

elt.scrollIntoView({block: 'center', inline: 'center', behavior: 'auto'})

根据文档,这尝试将元素放在中心(水平+垂直),而不是总是向下滚动。这足以解决您的问题。

在我的代码库(我没有编写)中,对

scrollIntoView
的所有调用都使用这些参数。

© www.soinside.com 2019 - 2024. All rights reserved.