本文介绍一种结合 css `position: sticky` 与轻量 javascript 的方案，使 iframe 在滚动时顶部始终贴合视口顶部、同时垂直收缩（保持顶部锚定），直至达到预设最小高度后随页面正常滚动离开视口；右侧文本内容不受影响，保持独立滚动行为。
要实现“iframe 顶部吸附 + 滚动缩放 + 最小高度阈值 + 右侧内容自由滚动”的交互效果，关键在于分离定位控制与尺寸控制：CSS 负责初始布局与粘性定位，JavaScript 负责动态计算并更新 iframe 高度。
✅ HTML 结构（语义清晰，便于样式隔离）
<div class="container">
<div class="iframe-wrapper">
<iframe id="shrinkable-iframe" src="https://example.com" title="动态缩放嵌入内容"></iframe>
</div>
<div class="text-content">
<h2>右侧说明文本</h2>
<p>这部分内容使用普通文档流，不参与粘性或缩放逻辑，可自由滚动、换行、响应式排版。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10362" title="java-api-doc-generator"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="java-api-doc-generator" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10362" title="java-api-doc-generator">java-api-doc-generator</a>
<p>分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。</p>
</div>
<a href="/xiazai/skill10362" title="java-api-doc-generator" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<!-- 更多文本... -->
</div>
</div>✅ 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 顶部已到达或超过视口顶），开始缩放：
- scrollDistance = Math.max(0, -wrapperTop)：将负值转为正值滚动量；
- newHeight = Math.max(minHeight, wrapperHeight - scrollDistance)：线性缩放，但不低于 minHeight；
- 直接设置 iframe 的 style.height（注意：必须作用于 iframe 元素本身，而非 wrapper）。
const iframeWrapper = document.querySelector('.iframe-wrapper');
const shrinkableIframe = document.getElementById('shrinkable-iframe');
const minHeight = 300; // ⚠️ 单位：像素，按需调整
// 使用节流优化性能（推荐生产环境添加）
let ticking = false;
const updateIframeHeight = () => {
if (!ticking) {
requestAnimationFrame(() => {
const wrapperRect = iframeWrapper.getBoundingClientRect();
const scrollDistance = Math.max(0, -wrapperRect.top);
const newHeight = Math.max(minHeight, iframeWrapper.offsetHeight - scrollDistance);
shrinkableIframe.style.height = `${newHeight}px`;
ticking = false;
});
ticking = true;
}
};
window.addEventListener('scroll', updateIframeHeight);
// 首次加载时也执行一次，确保初始状态正确
updateIframeHeight();⚠️ 注意事项与最佳实践
- 性能优化：示例中已采用 requestAnimationFrame 节流，避免高频 scroll 触发重排；如需更高性能，可配合 IntersectionObserver 替代部分监听逻辑。
- 响应式适配：若需支持移动端横屏/竖屏切换，建议在 resize 事件中重新初始化 minHeight 或调用 updateIframeHeight()。
- iframe 加载延迟：若 iframe 内容加载慢，可监听 iframe.onload 后再启用缩放逻辑，避免初始高度计算异常。
- 无障碍访问：为 iframe 添加 title 属性（如上例所示），提升屏幕阅读器兼容性。
- 浏览器兼容性：position: sticky 在 Safari 旧版本中需 -webkit-sticky 前缀；getBoundingClientRect() 全平台支持良好。
该方案以最小 JS 介入达成精确控制，结构解耦、逻辑清晰，兼顾视觉表现与用户体验，适用于产品介绍页、嵌入式仪表盘、双栏对比展示等场景。
