滚动到隐藏在标题后面的视图元素 [英] Scroll into view element hides behind header

问题描述

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

上述场景的工作示例:

解决方案

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

到外面的div

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

代码

//字段集

I am making a react application where on click over an item below select box the respective item in next section gets scrolled.

Working Example for above said scenario: https://codesandbox.io/s/scroll-into-view-in-react-7xtq9

Eg: Click on Item two, then its respective field set will gets scrolled to top..

Issue:

-> Now the requirement is that I need to add a header and below the header, both the sections needs to be displayed.

-> I have added style={{ marginTop: "100px" }} to the container div like,

   <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>

-> This makes the container to display below header.

1) -> But when I click on any item, then this container div gets hidden behind fixed header.

2) -> Also the scrolled element as well gets hidden behind header.

Expected Result:

-> The container section and the scrolled element needs to be visible from top even if any of the item was clicked.

-> To be simple it should not hide behind header and needs to be displayed below header.

Current working example:

解决方案

I believe you need to apply the styles to the outer container that is wrapping the container you want scrollable. This is the div rendering both the fixed position header and the content.

To the outer div

1. Add the margin-top: 100px to push content down.
2. Set a height that restricts the content from just expanding the height automatically, height: calc(100vh - 100px), the height of the view window minus the height of the header. Note: In the codesandbox I tweaked to 99vh to keep the window's scrollbar from appearing, so you'll likely need to tweak these values for your real code.
3. Hide the overflowing content and automatically display scrollbars when overflow occurs, overflow: auto.
4. Remove the in-line style prop from the inner content div.

Code

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

这篇关于滚动到隐藏在标题后面的视图元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！