本文介绍一种结合 css `position: sticky` 与轻量 javascript 的方案，使 iframe 在滚动时顶部始终贴合视口顶部、同时垂直收缩（保持顶部锚定），直至达到预设最小高度后随页面正常滚动离开视口；右侧文本内容不受影响，保持独立滚动行为。
要实现“iframe 顶部吸附 + 滚动缩放 + 最小高度阈值 + 右侧内容自由滚动”的交互效果，关键在于分离定位控制与尺寸控制：CSS 负责初始布局与粘性定位，JavaScript 负责动态计算并更新 iframe 高度。
✅ HTML 结构（语义清晰，便于样式隔离）
右侧说明文本
这部分内容使用普通文档流，不参与粘性或缩放逻辑，可自由滚动、换行、响应式排版。
✅ CSS 布局（Flex + Sticky + 重置基础样式）
/* 重置默认边距，避免意外偏移 */
body {
margin: 0;
padding: 0;
}
/* 并排容器：flex 布局确保 iframe-wrapper 和 text-content 水平排列 */
.container {
display: flex;
min-height: 100vh; /* 避免容器塌陷 */
}
/* iframe 容器：启用 sticky 定位，锚定顶部；设初始尺寸 */
.iframe-wrapper {
position: sticky;
top: 0;
width: 50%;
height: 100vh; /* 初始占满视口高度 */
overflow: hidden; /* 防止缩放过程中内容溢出 */
flex-shrink: 0; /* 禁止被 flex 压缩 */
}
/* iframe 自身：填满 wrapper，去除默认边框 */
#shrinkable-iframe {
width: 100%;
height: 100%;
border: none;
display: block; /* 避免底部空白间隙 */
}
/* 右侧文本区：固定宽度，独立滚动区域 */
.text-content {
width: 50%;
padding: 20px;
overflow-y: auto; /* 允许内部滚动（如内容超长） */
box-sizing: border-box;
}
✅ JavaScript 逻辑（精准计算缩放高度）
核心思路：监听 scroll 事件，通过 getBoundingClientRect().top 获取 .iframe-wrapper 相对于视口顶部的距离。当该值 ≤ 0（即 wrapper 顶部已到达或超过视口顶），开始缩放：
