本文介绍一种结合 css `position: sticky` 与轻量 javascript 的方案，使 iframe 在滚动至视口顶部时保持吸附、同时垂直收缩（底部跟随滚动），直至达到预设最小高度后正常滚出屏幕，且右侧文本内容不受影响。
要实现“iframe 顶部始终贴住视口顶部、随滚动逐步缩小、到达阈值后自然滚出”的交互效果，核心思路是：利用 position: sticky 实现初始吸附定位，再通过 JavaScript 动态计算并更新 iframe 高度，避免使用复杂 transform 或 scroll-linked animations（兼容性受限）。整个过程需确保右侧文本内容完全独立滚动，不参与缩放逻辑。
✅ HTML 结构设计
采用语义清晰的容器嵌套结构，将 iframe 封装在专用 wrapper 中，与文本内容并列置于 flex 容器内：
<div class="container">
<div class="iframe-wrapper">
<iframe id="shrinkable-iframe" src="https://example.com" title="Interactive demo"></iframe>
</div>
<div class="text-content">
<h2>右侧说明文本</h2>
<p>这段文字使用标准文档流布局，不受 iframe 缩放逻辑影响，滚动时保持自然行为。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10169" title="JS X Monitor"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="JS X Monitor" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10169" title="JS X Monitor">JS X Monitor</a>
<p>X.com (Twitter) 账号监控自动化：定时抓取指定账号最新推文，发现新内容即时推送通知。</p>
</div>
<a href="/xiazai/skill10169" title="JS X Monitor" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</div>
</div>? 关键 CSS 样式
- 重置基础样式：消除 body 默认边距干扰；
- Flex 布局隔离：.container { display: flex } 确保左右区域并排，且彼此独立；
- Sticky 定位 + 隐藏溢出：.iframe-wrapper 设为 position: sticky; top: 0，配合 overflow: hidden 防止 iframe 内容撑破容器；
- 尺寸控制：wrapper 占满视口高度（height: 100vh），iframe 100% 填充其父容器，文本区固定宽度（如 width: 50%）并留白。
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
min-height: 200vh; /* 确保有足够滚动空间 */
}
.iframe-wrapper {
position: sticky;
top: 0;
width: 50%;
height: 100vh;
overflow: hidden;
}
#shrinkable-iframe {
width: 100%;
height: 100%;
border: none;
display: block; /* 避免底部默认间隙 */
}
.text-content {
width: 50%;
padding: 20px;
box-sizing: border-box;
}⚙️ JavaScript 动态缩放逻辑
监听 scroll 事件，实时获取 .iframe-wrapper 相对于视口顶部的距离（getBoundingClientRect().top）：
- 当 top ≤ 0 时，表示 wrapper 已抵达视口顶边，开始缩放；
- scrollDistance = Math.max(0, -wrapperTop) 将滚动偏移转为正值；
- 新高度 = max(最小阈值, wrapper原始高度 − 滚动距离)，确保不小于设定下限（如 300px）；
- 关键细节：直接设置 iframe.style.height（而非 wrapper），因 wrapper 需维持 100vh 以支撑 sticky 行为，而缩放仅作用于 iframe 本身。
const iframeWrapper = document.querySelector('.iframe-wrapper');
const shrinkableIframe = document.getElementById('shrinkable-iframe');
const minHeight = 300; // 可根据需求调整
window.addEventListener('scroll', () => {
const rect = iframeWrapper.getBoundingClientRect();
const scrollDistance = Math.max(0, -rect.top);
const newHeight = Math.max(minHeight, iframeWrapper.offsetHeight - scrollDistance);
shrinkableIframe.style.height = `${newHeight}px`;
});⚠️ 注意事项与优化建议
- 性能优化：实际项目中建议对 scroll 事件添加防抖（debounce）或使用 requestAnimationFrame 节流，避免高频重绘；
- 响应式适配：在移动端或窄屏下，可结合 @media 查询调整 width 或切换为垂直堆叠布局；
- 无障碍支持：为 iframe 添加 title 属性，明确其功能用途；
- iframe 加载延迟：若 iframe 加载较慢，可在 iframe.onload 后再启用缩放逻辑，防止初始高度计算异常；
- 替代方案提示：CSS scroll-margin-top 可辅助锚点定位，但无法实现动态缩放——本方案在现代浏览器（Chrome 56+/Firefox 59+/Safari 15.4+）中稳定可用。
该方案以最小 JS 介入达成精准控制，结构解耦清晰，既满足视觉动效需求，又保障了右侧内容的布局稳定性与可访问性。
