本文介绍一种针对 chrome 浏览器中无限滚动（infinite scrolling）在触控板/触摸屏剧烈滑动时意外触顶、导致滚动中断的问题的实用修复方案，通过动态重置滚动位置实现视觉连续性。
本文介绍一种针对 chrome 浏览器中无限滚动（infinite scrolling）在触控板/触摸屏剧烈滑动时意外触顶、导致滚动中断的问题的实用修复方案，通过动态重置滚动位置实现视觉连续性。
在实现基于 DOM 重排的“循环无限滚动”（如日历时间轴、横向/纵向无限列表）时，一个常见但棘手的问题是：当用户使用触控板快速向下猛滑（即内容向上高速位移），scrollTop 可能瞬间归零甚至短暂为负（尽管被浏览器 clamped 为 0），导致滚动容器顶部“卡死”——后续轻微上滑无法触发预设的 factor
核心原理在于：不依赖 scroll 事件的瞬时值做“防触顶”，而是在检测到接近顶部时主动注入一次微小的、向下的滚动偏移，将视图“拉回”安全区间。原始逻辑中，factor = scrollTop / (scrollHeight - offsetHeight) 在 scrollTop ≈ 0 时趋近于 0，极易落入
container.addEventListener('scroll', function(event) {
const { scrollTop, scrollHeight, offsetHeight } = container;
const factor = scrollTop / (scrollHeight - offsetHeight);
// 主循环逻辑：维持中间区域稳定，两端动态轮转
if (factor 0.6) {
const firstItem = calendar.firstElementChild;
firstItem && (firstItem.remove(), calendar.append(firstItem));
}
// 【关键修复】Chrome 惯性滑动兜底：若 scrollTop 过小，强制下移至安全位置
if (scrollTop <blockquote><p>✅ <strong>为什么 scrollTo({top: 150, behavior: 'auto'}) 优于 scroll(0,150)？</strong><br>scrollTo() 是现代标准 API，支持 behavior 选项；设为 'auto' 可禁用平滑动画，避免与用户手势冲突，同时保证执行确定性。而 scroll() 是遗留方法，部分环境下兼容性略差。</p></blockquote><p>此外，为提升鲁棒性，建议补充以下实践：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/ai/3997" title="Label Studio"><img
src="https://img.php.cn/upload/ai_manual/001/246/273/178599594448045.png" alt="Label Studio" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/ai/3997" title="Label Studio" class="overflowclass">Label Studio</a>
<p class="overflowclass">Label Studio是一款AI数据处理工具，免费开源的数据标注工具。</p>
</div>
<a rel="nofollow" href="/ai/3997" title="Label Studio" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
-
节流优化：高频 scroll 事件易引发性能问题，可添加 requestAnimationFrame 节流：
let isScrolling = false; container.addEventListener('scroll', () => { if (!isScrolling) { isScrolling = true; requestAnimationFrame(() => { // 执行上述完整逻辑 isScrolling = false; }); } }); 初始状态校准：首次加载后立即调用 container.scrollTo(0, 150)，确保起始位置不在危险区。
CSS 辅助：为 .calendar-container 添加 overscroll-behavior-y: contain，可抑制 Chrome 默认的“弹性越界”效果，减少 scrollTop 异常波动。
该方案虽属“hacky”，但在当前浏览器行为差异下具备高实用性与低侵入性。它不改变原有无限滚动架构，仅通过一次精准的滚动重定位，即可彻底规避 Chrome 下剧烈滑动导致的顶部锁定问题，保障跨设备（触控板/触摸屏/鼠标滚轮）体验一致性。
