如何修复内容下方inset box-shadow随滚动内容偏移的问题

这个坑我踩过好多次！你现在的问题根源在于：阴影层和滚动内容放在了同一个滚动容器里，它跟着滚动上下文一起动是必然的。咱们只需要把阴影层从滚动容器里剥离出来，改成和滚动容器同级的元素，让它视觉上覆盖在容器上方，就能让阴影固定住不跟着滚了。

具体做法分这几步：

• 把原来的内层阴影div移到外层滚动div的外面，变成兄弟元素
• 给阴影层设置和滚动容器完全一致的尺寸与位置，同时加上pointer-events: none，避免它挡住滚动容器内部的交互（比如点击文本、输入内容）
• 滚动容器保持position: relative，这样阴影层可以相对它精准定位

修改后的代码如下：

<div class="scroll-container">
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>
<div class="shadow-overlay"></div>

<style>
.scroll-container {
  height: 300px;
  color: red;
  position: relative;
  overflow: auto; /* 这里加上你需要的滚动属性，比如auto或scroll */
}
.shadow-overlay {
  box-shadow: inset 0 0 10px black;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 关键：让阴影层不拦截鼠标事件 */
}
</style>

原理说明 #

阴影层现在是独立于滚动内容的“覆盖层”，它只负责渲染内阴影效果，不会参与滚动容器的滚动上下文。pointer-events: none是关键，它让鼠标事件直接穿透阴影层到达下面的滚动容器，不会影响用户和容器内内容的交互。

如果你需要给滚动容器加边框或者外边距，只需要同步调整阴影层的位置和尺寸就行，保证两者完全对齐就ok啦～

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