本文介绍如何通过 javascript 动态锁定页面垂直滚动，直到用户完成特定操作（如点击最后一组选项卡），再解除限制；包含防抖优化、精准定位控制、事件联动机制及实用注意事项。
本文介绍如何通过 javascript 动态锁定页面垂直滚动，直到用户完成特定操作（如点击最后一组选项卡），再解除限制；包含防抖优化、精准定位控制、事件联动机制及实用注意事项。
在数据可视化或分步引导型页面中，常需确保用户按顺序完成关键交互（例如浏览全部图表卡片）后，才能访问后续内容。针对这类需求，直接禁用 body 滚动（如 overflow: hidden）过于粗暴——它会丢失当前滚动位置、破坏原生体验，且无法实现“到达某区域即解锁”的精细控制。更专业、可维护的方案是：监听滚动行为，在临界点主动重置滚动位置，并通过业务逻辑动态开关解锁权限。
核心实现原理
我们不阻止滚动事件本身（preventDefault() 在 scroll 事件中无效），而是利用 window.scrollTo() 实时矫正滚动位置。关键在于：
- 使用 requestAnimationFrame 防抖，避免高频触发导致卡顿；
- 定义一个“拦截阈值”（如目标区域顶部距视口顶部的距离）；
- 仅当用户未完成前置操作且已越过该阈值时，强制回滚到阈值位置；
- 通过业务事件（如点击 #both 标签）修改解锁状态。
以下为完整可运行代码：
// 初始化状态
let isScrollLocked = true; // 初始锁定
let lockThreshold = 0; // 滚动拦截阈值（像素）
let ticking = false;
// 计算目标区域（.to-next）的顶部偏移量（兼容滚动容器）
function updateThreshold() {
const targetEl = document.querySelector('.to-next');
if (targetEl) {
lockThreshold = targetEl.getBoundingClientRect().top + window.scrollY - 20;
// 减去20px留出视觉缓冲，避免临界抖动
}
}
// 滚动矫正主逻辑
function enforceScrollLock(scrollTop) {
if (isScrollLocked && scrollTop > lockThreshold) {
window.scrollTo({ top: lockThreshold, behavior: 'smooth' });
}
}
// 高效滚动监听（防抖 + requestAnimationFrame）
document.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
enforceScrollLock(window.scrollY);
ticking = false;
});
ticking = true;
}
});
// 【关键】绑定业务解锁事件：点击"3/3"标签时解除锁定
document.getElementById('both').addEventListener('click', () => {
isScrollLocked = false;
console.log('✅ 滚动锁定已解除，用户可自由访问后续内容');
});
// 页面加载/尺寸变化时更新阈值（适配响应式）
window.addEventListener('load', updateThreshold);
window.addEventListener('resize', updateThreshold);
HTML 结构适配说明
确保你的 .to-next 区域（即需保护的内容起始位置）在 DOM 中位于所有交互卡片之后，例如：
<!-- ... 原有的 tabs 和 box 内容 ... -->
<div class="to-next">
<div class="next-content">
<h1>Next</h1>
<p>此处为解锁后才可查看的内容...</p>
</div>
</div>
同时，确认 #both 是 对应的真实 input[type="radio"] 的 id（而非 for 属性值）。若使用
// 更健壮的写法：监听 radio 输入变更
document.getElementById('both').addEventListener('change', function() {
if (this.checked) isScrollLocked = false;
});
注意事项与最佳实践
- ✅ 避免 body { overflow: hidden }：该方式会重置滚动条、影响键盘导航（如空格键翻页），且无法实现“滚动到某处即触发”的语义化控制。
- ✅ 阈值动态计算：使用 getBoundingClientRect().top + scrollY 而非固定像素值，确保在不同屏幕尺寸和缩放比例下精准生效。
- ⚠️ 移动端兼容性：iOS Safari 对 scrollTo 行为较敏感，建议添加 behavior: 'auto'（移除平滑动画）提升兼容性。
- ⚠️ 无障碍考量：为被锁定区域添加 aria-live="polite" 及状态提示（如屏幕阅读器友好的提示文字），告知辅助技术用户当前限制。
- ? 进阶扩展：可结合 Intersection Observer API 替代手动计算阈值，实现更高效的视口检测；或通过 CSS scroll-snap-type 辅助分步滚动体验。
通过此方案，你不仅能精准控制用户行为流，还能保持原生滚动性能与可访问性，是现代 Web 引导式交互的推荐实践。
