Scroll Into View Element Hides Behind Header
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://cod
Solution 1:
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
- Add the
margin-top: 100px
to push content down. - 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 to99vh
to keep the window's scrollbar from appearing, so you'll likely need to tweak these values for your real code. - Hide the overflowing content and automatically display scrollbars when overflow occurs,
overflow: auto
. - Remove the in-line
style
prop from the inner contentdiv
.
Code
<div
style={{
marginTop: "100px",
height: "calc(99vh - 100px)",
overflow: "auto"
}}
>
{/* Nav */}
<div id="container">
<div className="_2iA8p44d0WZ">
// content
</div>
</div>
{/* fieldsets */}
</div>
Post a Comment for "Scroll Into View Element Hides Behind Header"