本文介绍一种纯 css 方案，让指定元素（如模拟手机设备）在滚动到视口时自动进入 sticky 状态，并在其内部可滚动内容完全展示后，平滑恢复页面正常滚动行为，避免卡顿、跳回顶部或阻塞主滚动等问题。
本文介绍一种纯 css 方案，让指定元素（如模拟手机设备）在滚动到视口时自动进入 sticky 状态，并在其内部可滚动内容完全展示后，平滑恢复页面正常滚动行为，避免卡顿、跳回顶部或阻塞主滚动等问题。
在构建响应式网页时，常需实现“伪粘性设备预览”效果：当用户滚动至某模块（如一个 iPhone 设备容器），该容器应固定于视口顶部，同时其内部卡片列表可独立纵向滚动；待所有卡片滚动到底部后，容器应自然退出粘性状态，交还滚动控制权给主页面——而非出现常见的 body { overflow: hidden } 导致的滚动中断、滞后或跳变。
传统 JavaScript 方案（如监听 wheel 事件并手动控制 scrollTop）易引发竞态问题：事件绑定重复、overflow: hidden 未及时清除、滚动边界判断不准等，最终导致主滚动冻结或突兀跳转。而更稳健、轻量且符合现代 Web 标准的解法是 纯 CSS 驱动的 sticky + 布局隔离方案。
✅ 核心原理：利用 position: sticky 的天然生命周期
position: sticky 的行为本质是“在滚动范围内保持定位，超出范围即脱离”。我们可通过以下三步精准控制其作用区间：
- 将设备容器包裹在 sticky 元素内，但设置 height: 0，使其不占用文档流高度；
- 设备内容区域（.err-view）设为 overflow-y: auto，并赋予足够高度（由内部卡片总高度决定）；
- 紧随其后的下一个 <section> 设置 position: relative 和更高 z-index，作为视觉“遮罩层”，在设备内容滚完后覆盖其底部溢出，从而自然终止 sticky 行为。
? 实现代码（精简版，适配原项目结构）
/* 关键：让 .err-mobile 成为 sticky 容器，但自身高度为 0 */
.err-mobile {
position: sticky;
top: 0;
height: 0; /* 不占布局空间，仅触发 sticky 机制 */
z-index: 10;
}
/* 设备主体需显式设定尺寸，并允许内部滚动 */
.err-device {
width: 340px;
height: 100vh;
margin: 0 auto;
}
.err-view {
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
scrollbar-width: none;
}
.err-view::-webkit-scrollbar { display: none; }
/* 紧接在 .err-mobile 后的兄弟元素（如 .section-full）需提升层级 */
.section-full:nth-of-type(5) { /* 假设它是第 5 个 section，即 .err-mobile 后第一个 */
position: relative;
z-index: 11;
}<!-- HTML 结构微调（关键：确保 .err-mobile 是独立 section，且后继元素可覆盖） -->
<div class="section-full">1</div>
<div class="section-full">2</div>
<div class="section-full">3</div>
<div class="section-full">4</div>
<!-- 粘性设备容器 -->
<div class="err-mobile">
<div class="err-device">
<div class="err-ring">
<div class="err-mic"></div>
<div class="err-view">
<div class="err-cards">
<!-- 所有 err-card 保持原样 -->
</div>
</div>
<!-- 其他装饰元素（navigator, power, volume） -->
</div>
</div>
</div>
<!-- 下一节：用作 sticky 终止锚点 -->
<div class="section-full" style="position:relative; z-index:11;">-2</div>
<div class="section-full">-1</div>⚠️ 注意事项与优化建议
- 避免 JS 干预滚动：移除原 script.js 中对 body.overflow 和 wheel 事件的手动控制，交由浏览器原生 sticky 逻辑处理，性能更优、兼容性更好。
- 高度计算要准确：.err-view 的实际可滚动高度 = 所有 .err-card 总高度 + padding。若卡片动态加载，需在 DOM 更新后调用 el.scrollHeight 并重置容器最小高度（可用 ResizeObserver 监听）。
- 移动端兼容性：position: sticky 在 iOS Safari ≥ 15.4、Android Chrome ≥ 98 中已全面支持；旧版本可添加 -webkit-sticky 前缀。
- 无障碍增强：为 .err-view 添加 aria-label="Device content scroll area"，并确保键盘 Tab 可聚焦滚动区域。
此方案摒弃了脆弱的 JavaScript 滚动劫持，转而利用 CSS 的声明式布局能力，既保证了滚动体验丝滑连贯，又大幅降低维护成本。当内部内容滚动完毕，sticky 元素自然“失效”，主页面滚动无缝接管——这才是真正符合用户直觉的粘性交互。
