I have a container that has some animation and CSS with overflow: hidden.
When I apply scroll-margin-top to this container,
overflow: hidden removes it, and the effect is not visible.
I have a sticky header and when I click on a button, it should scroll to the container which should be below the header, but now the container is behind the header. I know overflow: hidden is causing the problem because when I use scroll-margin-top it works fine. How can I solve this?
You could use scroll-margin-top along-side overflow: clip, rather than overflow:hidden.
Note: this will the effect of being unable to scroll contents overflowing the edge into view
I believe this is because using overflow: hidden will create a new block formatting context, while using overflow: clip will not.
For clip:
Similar to
hidden, the content is clipped to the element's padding box. The difference betweenclipandhiddenis that theclipkeyword also forbids all scrolling, including programmatic scrolling. The box is not a scroll container, and does not start a new formatting context. If you wish to start a new formatting context, you can usedisplay: flow-rootto do so.
Example:
header {
background-color: blue;
width: 100%;
height: 50px;
position: fixed;
top: 0px;
}
.blob {
border: 2px solid blue;
width: 50%;
height: 50px;
margin: 20px auto;
text-align: center;
scroll-margin-top: 60px;
overflow: clip;
}<header></header>
<div class = "blob"></div>
<div class = "blob">
<a href = "#here">Click me</a>
</div>
<div class = "blob"></div>
<div class = "blob"></div>
<div class = "blob"></div>
<div class = "blob"></div>
<div class = "blob"></div>
<div class = "blob" id = "here">
<p>Scroll to me</p>
<p>Extra text</p>
<p>Extra text</p>
<p>Extra text</p>
<p>Extra text</p>
</div>
<div class = "blob"><p>Div after scroll to me</p></div>
<div class = "blob"></div>
<div class = "blob"></div>
<div class = "blob"></div>
<div class = "blob"></div>
<div class = "blob"></div>
<div class = "blob"></div>