如何实现CSS内部阴影覆盖滚动内容？

你的问题本质是CSS内阴影的堆叠层级低于子元素：父容器的inset阴影是绘制在自身背景之上、子元素之下的，所以当子容器内容滚动时，会直接覆盖掉父容器的内阴影。

下面提供两种适配你现有代码的解决方案，都能让阴影始终显示在内容上方：

方案一：用Tailwind伪元素实现（无需额外CSS） #

直接给主容器添加伪元素类，通过绝对定位让阴影层覆盖在子容器上方，同时不影响交互：

return (
<div id='main' className="flex h-full relative after:content-[''] after:absolute after:inset-0 after:shadow-[inset_0_10px_3px_red] after:pointer-events-none">
  <div
    id='sub'
    ref={ref}
    className="overflow-auto"
    style={{
      width: '100vw',
    }}
  >
    <div>Some text</div>
    {/* 长列表内容 */}
    <div>Some text</div>
  </div>
</div>
);

关键类说明：

• relative：让伪元素基于主容器定位
• after:content-['']：生成伪元素
• after:absolute after:inset-0：伪元素铺满整个主容器
• after:shadow-[inset_0_10px_3px_red]：添加你需要的内阴影样式
• after:pointer-events-none：让伪元素不拦截子元素的点击、滚动等交互操作

方案二：自定义CSS实现 #

如果更习惯写传统CSS，可以移除主容器的阴影类，用伪元素模拟阴影：

#main {
  position: relative;
}

#main::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 10px 3px red;
  pointer-events: none;
}

对应的JSX：

return (
<div id='main' className="flex h-full">
  <div
    id='sub'
    ref={ref}
    className="overflow-auto"
    style={{
      width: '100vw',
    }}
  >
    <div>Some text</div>
    {/* 长列表内容 */}
    <div>Some text</div>
  </div>
</div>
);

这两种方法的核心逻辑一致：通过独立的伪元素层承载阴影，让阴影的堆叠层级高于子容器内容，从而避免被滚动内容覆盖。

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