滚动触发内容揭示效果开发需求：从父div底部显示隐藏内容

通过CSS定位结合JavaScript滚动监听，可实现内容从父容器底部逐步浮现、并被底部山脉图遮挡的视觉效果，完整实现代码如下：

HTML结构 #

<div class="parent-container">
  <div class="content">
    <h2>滚动查看浮现效果</h2>
    <p>这是从山体后方浮现的内容，随着页面滚动逐步显示</p>
    <p>更多示例文本，用来填充内容区域...</p>
    <p>可以根据需求替换成任意内容</p>
  </div>
  <img class="mountain-img" src="你的山脉图片路径" alt="底部山脉">
</div>

CSS样式 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* 给页面设置足够高度，保证有滚动空间 */
  height: 200vh;
}

.parent-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #e6f3ff;
  overflow: hidden; /* 隐藏初始状态下超出容器的内容 */
}

.content {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 2.5rem;
  background-color: rgba(255, 255, 255, 0.95);
  /* 初始状态完全隐藏在容器底部 */
  transform: translateY(100%);
  /* 添加平滑过渡，让浮现效果更自然 */
  transition: transform 0.1s ease-out;
  z-index: 1; /* 确保内容在山脉图下方 */
}

.mountain-img {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 2; /* 山脉图层级更高，实现遮挡效果 */
}

JavaScript逻辑 #

const content = document.querySelector('.content');

window.addEventListener('scroll', () => {
  // 计算滚动进度：当前滚动距离 / 页面可滚动总高度
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const totalScrollable = document.documentElement.scrollHeight - window.innerHeight;
  const scrollRatio = Math.min(scrollTop / totalScrollable, 1); // 限制进度最大值为1

  // 根据滚动进度调整内容的位移，滚动越多，内容向上移动越多
  content.style.transform = `translateY(${(1 - scrollRatio) * 100}%)`;
});

关键实现说明 #

• 层级控制：通过z-index让山脉图始终在内容上方，模拟“内容从山体后方浮现”的视觉效果。
• 初始隐藏：内容容器通过translateY(100%)完全移出父容器底部，初始状态不可见。
• 滚动联动：监听页面滚动事件，将滚动比例转换为内容的位移值，实现滚动时内容逐步显示的效果。

内容的提问来源于stack exchange，提问作者Ryan M Vickerman