带固定Header的Div滚动条被遮挡：寻求纯CSS解决方案

当然可以用纯CSS解决这个问题，最优雅的方案是把固定表头的定位方式从fixed改成sticky——这完全贴合你的需求，不需要任何JavaScript。

问题根源 #

你当前的fixed定位是相对于整个视口的，设置固定宽度后会直接覆盖父容器的滚动条区域，导致滚动条无法被点击。而sticky定位是相对于滚动的父容器工作的，它会留在容器内部，宽度自动适配父容器的可用空间（自然避开滚动条），同时保持在容器顶部不随内容滚动。

修改后的代码 #

HTML（无需改动）

<div class="container"> 
  <div class="header">Fixed header, long enough to demonstrate that scrollbar can't be triggered by clicking on header</div> 
  <div class="content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, eum sapiente non, natus et, ullam unde odio quos quo blanditiis aspernatur minus quas? Architecto enim iure itaque reiciendis cupiditate, et consequatur natus praesentium aspernatur voluptas illum odit eius distinctio doloribus animi iusto, repudiandae, maiores sint laudantium id unde veritatis! Suscipit odio obcaecati possimus nisi culpa autem deleniti dolores inventore commodi ex sed consectetur modi cupiditate eveniet, omnis repellendus placeat ab iste fuga harum esse quod enim excepturi minus? Similique, alias est doloremque deserunt tempora dolore delectus, eligendi veritatis ipsum, dolorum tenetur id quod cum rerum vero amet tempore laborum nam.</div> 
</div>

CSS（关键修改）

* { box-sizing: border-box; } 
body { margin: 0; } 
.container { 
  position: relative; 
  z-index: 1; 
  width: 200px; 
  height: 500px; 
  /* 移除padding-top：sticky元素在容器内部，不需要预留空间 */
  overflow: auto; 
  background-color: coral; 
} 
.header { 
  position: sticky; /* 替换fixed为sticky */
  top: 0; /* 定义粘滞的位置：容器顶部 */
  width: 100%; /* 占满父容器宽度（可选，block元素默认占满） */
  height: 100px; 
  padding: 10px 0; 
  background-color: violet; 
  text-align: center; 
  font-weight: bold; 
}

备选方案（保留fixed定位的情况） #

如果你因为某些原因必须保留fixed定位，可以通过事件穿透实现：给表头添加pointer-events: none让它不接收点击事件，再给表头内部的内容单独设置pointer-events: auto保证内容可交互。这样点击表头覆盖滚动条的区域时，事件会穿透到下面的容器，就能正常操作滚动条了。

修改后的代码示例

HTML

<div class="container"> 
  <div class="header">
    <div class="header-content">Fixed header, long enough to demonstrate that scrollbar can't be triggered by clicking on header</div>
  </div> 
  <div class="content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, eum sapiente non, natus et, ullam unde odio quos quo blanditiis aspernatur minus quas? Architecto enim iure itaque reiciendis cupiditate, et consequatur natus praesentium aspernatur voluptas illum odit eius distinctio doloribus animi iusto, repudiandae, maiores sint laudantium id unde veritatis! Suscipit odio obcaecati possimus nisi culpa autem deleniti dolores inventore commodi ex sed consectetur modi cupiditate eveniet, omnis repellendus placeat ab iste fuga harum esse quod enim excepturi minus? Similique, alias est doloremque deserunt tempora dolore delectus, eligendi veritatis ipsum, dolorum tenetur id quod cum rerum vero amet tempore laborum nam.</div> 
</div>

CSS

* { box-sizing: border-box; } 
body { margin: 0; } 
.container { 
  position: relative; 
  z-index: 1; 
  width: 200px; 
  height: 500px; 
  padding-top: 100px; 
  overflow: auto; 
  background-color: coral; 
} 
.header { 
  position: fixed; 
  left: 0; 
  top: 0; 
  width: 200px; 
  height: 100px; 
  padding: 10px 0; 
  background-color: violet; 
  pointer-events: none; /* 让表头不接收点击事件 */
}
.header-content {
  text-align: center; 
  font-weight: bold; 
  pointer-events: auto; /* 恢复内容区域的点击交互 */
}

不过还是首推sticky方案，它从布局层面解决了滚动条被覆盖的问题，逻辑更清晰，也没有事件穿透带来的潜在问题。

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