overflow: hidden元素的scroll-margin-top不生效原因及解决方法

干扰原因 #

scroll-margin-top 属性的作用范围是父级滚动上下文，仅当元素本身不是独立滚动容器时才会对页面级滚动锚定生效。
当元素设置 overflow: hidden 后，只要 overflow 属性值不为默认的 visible，元素就会创建独立的块级格式化上下文（BFC），同时被识别为独立滚动容器。此时该元素的 scroll-margin 系列属性会作用于自身内部的滚动上下文，不再响应父级页面的滚动锚定逻辑，所以你设置的3rem偏移就失效了。

共存方案 #

不需要强制让两个属性写在同一个元素上，两种常用方案可以同时实现需求：

• 方案一：DOM嵌套拆分属性
  给当前section外层新增一个无样式的父容器，把scroll-margin-top迁移到外层容器，overflow: hidden保留在原section元素上，不会影响原有布局逻辑：
  结构代码：

  <div class="section-scroll-wrapper">
    <section>
      <!-- 原有内容 -->
    </section>
  </div>
  

  样式代码：

  .section-scroll-wrapper {
    scroll-margin-top: 3rem;
  }
  section {
    overflow: hidden;
  }
  

• 方案二：无需修改DOM的样式替代方案
  如果不想调整DOM结构，可以用padding-top + 负margin-top的组合替代scroll-margin-top，效果完全一致，且不会触发独立滚动容器：

  section {
    overflow: hidden;
    padding-top: 3rem;
    margin-top: -3rem;
  }
  

  这个方案的原理是用padding撑开滚动锚定的偏移位置，再用负margin抵消padding带来的额外空间占位，最终渲染效果和原需求完全匹配。

内容的提问来源于stack exchange，提问作者skalta