如何在可滚动div上固定悬浮React组件且不随内容滚动？

问题根因 #

当前Overlay的position: absolute绑定的定位上下文是同为position: relative的Inner容器，当FileList内容溢出后，Inner实际高度超出外层Container的可视高度，滚动Container时整个Inner连带绑定在它上面的Overlay会同步位移，所以出现跟随滚动的情况。

修复方案 #

调整DOM结构，将Overlay从Inner中移出，与Inner平级，让Overlay的定位上下文改为外层的Container即可，修改后代码如下：

const Container = styled.div`
  position: relative;
  margin-top: 24px;
  width: 80%;
  height: 60%;
  overflow-y: auto;
`;

const Inner = styled.div`
  height: 100%;
  width: 100%;
`;

const Overlay= styled.div`
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 可选：不遮挡下层交互 */
  /* pointer-events: none; */
  /* 可选：半透明背景增强悬浮感 */
  /* background: rgba(255, 255, 255, 0.8); */
`;

function FileSystem() {
  return (
    <Container>
      <Overlay>I want this to not scroll</Overlay>
      <Inner>
        <FileList />
      </Inner>
    </Container>
  );
}

可选优化说明 #

• 若悬浮层仅做展示用，不需要响应点击等交互，可以给Overlay添加pointer-events: none属性，避免遮挡下层FileList的滚动、点击操作；如果悬浮层本身有按钮等可交互元素，给对应子元素单独设置pointer-events: auto即可恢复交互。
• 可按需给Overlay添加半透明背景，更清晰区分悬浮层和下层内容。

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