本文介绍如何修复 chrome 浏览器中因触控板/触摸屏快速滑动导致无限滚动容器 scrolltop 归零、破坏循环滚动体验的问题，通过主动重置滚动位置并配合阈值控制，确保视觉连续性与交互稳定性。
本文介绍如何修复 chrome 浏览器中因触控板/触摸屏快速滑动导致无限滚动容器 scrolltop 归零、破坏循环滚动体验的问题，通过主动重置滚动位置并配合阈值控制，确保视觉连续性与交互稳定性。
在实现“虚拟无限滚动”（如日历小时视图）时，常见策略是监听容器 scroll 事件，根据 scrollTop 占比动态将首尾元素循环移入移出 DOM，从而维持内容在可视区中心的稳定呈现。然而，在 Chrome（尤其是 macOS 触控板或 Windows 触控屏）上，用户快速向下猛滑（即内容向上高速位移）时，滚动惯性常使 scrollTop 瞬间归零甚至短暂为负（尽管被浏览器 clamp 到 0），导致容器顶部“卡死”——用户需反向滑动才能重新触发底部加载逻辑，严重破坏无缝滚动体验。
根本原因在于：Chrome 的滚动引擎在高动能滑动结束时，会将 scrollTop 强制设为 0，而你的滚动监听逻辑仅在 factor 0.6（接近底部）时才执行循环操作，此时 scrollTop === 0 已超出该响应区间，造成逻辑断层。
解决方案：主动防御式滚动重置
在 scroll 事件处理函数末尾添加一个轻量级兜底逻辑——当检测到 scrollTop 接近 0（例如 高 50px），确保至少露出 2–3 个完整项，避免视觉跳变：
container.addEventListener('scroll', function(event) {
const factor = container.scrollTop / (container.scrollHeight - container.offsetHeight);
// 主循环逻辑：顶部/底部临界区元素置换
if (factor 0.6) {
const firstItem = calendar.querySelector(':first-child');
firstItem.remove();
calendar.append(firstItem);
}
// 【关键修复】防御性重置：防止 Chrome 滚动归零导致卡顿
if (container.scrollTop <blockquote>
<p>✅ <strong>注意事项</strong>： </p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/js/4336" title="可自定义的虚拟滚动条"><img
src="https://img.php.cn/upload/jscode/000/120/096/5da96027e9441372.jpg" alt="可自定义的虚拟滚动条" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/js/4336" title="可自定义的虚拟滚动条" class="overflowclass">可自定义的虚拟滚动条</a>
<p class="overflowclass">可自定义的虚拟滚动条</p>
</div>
<a rel="nofollow" href="/xiazai/js/4336" title="可自定义的虚拟滚动条" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>使用 behavior: 'auto'（而非 'smooth'）避免与原生滚动冲突引发抖动； </li>
<li>150px 偏移量需根据实际项高动态调整（建议 ≥ 1.5 × itemHeight）； </li>
<li>此方案兼容性良好，不影响 Firefox/Safari 行为，仅在 Chrome 触发； </li>
<li>若容器存在 overscroll-behavior: contain，请确保其未禁用滚动传播（本例无需设置）。 </li>
</ul>
</blockquote><p><strong>进阶优化建议</strong> </p>
- 为提升性能，可对 scroll 事件添加 passive: true 并使用 requestAnimationFrame 节流（但需注意 scrollTop 读取必须同步）；
- 更健壮的方案是监听 scrollend 事件（Chrome 117+ 支持），在滚动完全停止后校验并修正位置，避免高频触发；
- 对于生产环境，建议封装为可复用的 InfiniteScroller 类，内置阈值配置、项高自动计算及跨浏览器适配逻辑。
通过这一简洁而精准的修复，即可彻底解决 Chrome 下剧烈滑动导致的无限滚动“顶部锁死”问题，在保持代码轻量的同时，交付真正丝滑、无中断的循环滚动体验。
