如何用CSS实现父元素视口状态变化时调整子元素位置（无需JS）

首先明确：:in-viewport并非标准CSS伪类，无浏览器支持，因此你的原代码无法生效。目前可通过position: sticky实现纯CSS的需求效果，具体方案如下：

实现代码 #

HTML结构 #

<ng-scrollbar class="scroll">
   <div class="parent">
      <div class="child"></div>
   </div>
</ng-scrollbar>

CSS样式 #

/* 配置滚动容器，确保sticky有正确的参考视口 */
.scroll {
  height: 100vh; /* 设置滚动容器高度为视口高度 */
  overflow-y: auto;
}

.parent {
  position: relative;
  min-height: 200vh; /* 模拟父元素足够长的内容，方便测试滚动效果 */
}

.child {
  position: sticky;
  /* 父元素在视口内时：子元素位于父元素底部外侧10px处 */
  bottom: 10px;
  /* 父元素移出视口时：子元素固定在视口顶部下方10px处 */
  top: 10px;
  /* 基础样式，方便观察效果 */
  width: 100%;
  height: 50px;
  background-color: #e0e0e0;
}

原理说明 #

• position: sticky元素会根据滚动位置，自动在相对父元素的relative定位和相对滚动容器视口的类固定定位之间切换。
• 当父元素处于滚动容器的视口范围内时，bottom: 10px会让子元素保持在父元素底部外侧10px的位置。
• 当父元素滚动出视口后，top: 10px会触发sticky的固定特性，让子元素停在视口顶部下方10px的位置。

若需求是父元素移出视口时子元素位于视口底部上方10px，只需将top: 10px替换为top: calc(100vh - 10px - 子元素高度)，比如子元素高度为50px时，写为top: calc(100vh - 60px)即可。

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