Why does overflow: hidden remove scroll margin top?

Question

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?

Answer 1

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 between clip and hidden is that the clip keyword 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 use display: flow-root to 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>