如何解决fixed定位Header遮挡导致页面无法滚动的问题？

问题根源 #

fixed定位的Header会脱离文档流，尽管它嵌套在.app滚动容器内，但鼠标悬停在Header上时，滚动事件会被Header直接捕获，而Header本身无滚动能力，导致.app的滚动无法触发。

修复方案 #

方案一：使用pointer-events（推荐）

给Header设置pointer-events: none，让它不拦截滚动事件，同时给Header内的可交互元素（如按钮）恢复pointer-events: auto，保证按钮正常点击：

.header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
  background-color: rgba(0, 0, 0, .3);
  pointer-events: none; /* 让Header不捕获鼠标事件 */
}

.header button {
  pointer-events: auto; /* 恢复按钮的交互能力 */
}

方案二：调整DOM结构

将Header移出.app容器，同时给.app添加顶部内边距，避免内容被Header遮挡：

修改后的HTML：

<header class="header">
  <div class="header__left">
    <button>Button 1</button>
    <button>Button 2</button>
  </div>

  <div class="header__right">
    <button>Button 3</button>
  </div>
</header>

<div class="app">
  <main class="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam culpa cum cupiditate delectus dignissimos
      dolor eum impedit ipsam laudantium nam neque obcaecati odio omnis, quidem rem ullam veritatis vero voluptates.
    </div>
    <div>Architecto, aspernatur consequuntur debitis deserunt earum eveniet exercitationem fugiat hic impedit labore
      maiores molestiae molestias mollitia nisi obcaecati perspiciatis possimus reiciendis, repellendus rerum saepe sit
      soluta tempora ullam vel vero.
    </div>
    <div>Ab ad at dolore fuga in ipsum, iusto modi, molestias nam praesentium qui ratione repellendus ut voluptas
      voluptatibus. Asperiores assumenda dolor ea eum illo illum, in odio repellendus ut vitae.
    </div>
  </main>
</div>

修改后的CSS：

.app {
  height: 100vh;
  overflow-y: scroll;
  padding-top: 100px; /* 与Header高度一致，避免内容被遮挡 */
}

.content {
  /* 移除原有的margin-top: 100px */
}

方案对比 #

• 方案一无需改动DOM结构，代码更简洁，适合绝大多数现代浏览器场景。
• 方案二兼容性更强，适合对pointer-events属性有兼容性要求的老旧项目。

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