滚动页面时使iframe顶部固定并缩小，达最小尺寸后随页面滚动

核心思路 #

用CSS基础布局配合少量JS监听滚动事件，动态调整iframe高度：当iframe顶部触达视口顶部后，随滚动逐步缩小高度（保持顶部不超出视口），直到达到设定的最小高度后，允许其正常滚出屏幕。同时保证右侧文本不受影响，正常滚动。

1. HTML结构 #

保留原flex容器结构，给iframe套一层容器（方便统一控制尺寸，避免直接操作iframe的样式冲突）：

<div class="flex-container">
  <div class="iframe-wrapper">
    <iframe src="你的iframe地址" frameborder="0"></iframe>
  </div>
  <div class="text-content">
    <!-- 右侧长文本内容 -->
    这里是需要正常滚动的文本内容...
  </div>
</div>

2. CSS布局 #

• flex容器横向排列，文本区域占满剩余空间
• 给iframe容器设置初始高度、最小高度，让iframe继承容器尺寸：

.flex-container {
  display: flex;
  gap: 20px; /* 可选：设置iframe和文本的间距 */
}

.iframe-wrapper {
  width: 400px; /* 固定iframe宽度，按需调整 */
  height: 600px; /* 初始高度 */
  min-height: 200px; /* 设定的最小高度 */
  flex-shrink: 0; /* 防止flex布局压缩iframe宽度 */
}

.iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.text-content {
  flex: 1; /* 文本区域占满剩余空间 */
}

3. 少量JS逻辑 #

监听滚动事件，计算滚动位置，动态调整iframe容器的高度：

const iframeWrapper = document.querySelector('.iframe-wrapper');
const minHeight = parseInt(getComputedStyle(iframeWrapper).minHeight);
const initialHeight = parseInt(getComputedStyle(iframeWrapper).height);
const wrapperOffsetTop = iframeWrapper.offsetTop;

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;
  // 滚动到iframe顶部触达视口顶部时开始调整
  if (scrollY >= wrapperOffsetTop) {
    // 计算目标高度：视口高度 - 滚动超出iframe顶部的距离
    const targetHeight = window.innerHeight - (scrollY - wrapperOffsetTop);
    // 确保高度不小于设定的最小值
    iframeWrapper.style.height = `${Math.max(targetHeight, minHeight)}px`;
  } else {
    // 滚动回初始位置时恢复原高度
    iframeWrapper.style.height = `${initialHeight}px`;
  }
});

关键细节说明 #

• 用iframe-wrapper包裹iframe，避免直接操作iframe可能出现的样式兼容问题
• flex-shrink: 0确保iframe宽度不会被flex布局压缩，保持固定尺寸
• 计算目标高度时，始终让iframe顶部贴合视口顶部，直到高度降至最小值
• 达到最小高度后，iframe会随页面滚动正常移出视口，不影响右侧文本滚动

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