本文详解因重复绑定 scroll 事件导致顶部同步滚动条在小尺寸窗口下失效的根本原因，并提供带防重复绑定、响应式兼容的 jquery 解决方案。
在使用 jQuery 模拟顶部滚动条（与底部 GridView 水平滚动同步）时，常见问题之一是：窗口缩放至浏览器默认缩放比例低于 90%（如 75%、67%）后，顶部滚动条突然失去响应——拖动无效、无法同步滚动，而一旦恢复至 90% 或以上，功能又恢复正常。表面看是“缩放触发”，实则本质是 事件监听器重复注册引发的逻辑冲突与性能异常。
原代码中，TopScrollBar() 函数在 $(document).ready、prm.add_endRequest（ASP.NET AJAX 回发后）及 $(window).resize 三个时机被反复调用；而每次调用都执行：
$("#divScroll").on('scroll', function () { ... });
$("#GridContainer").on('scroll', function () { ... });这会导致同一元素上堆积多个相同的 scroll 监听器。当窗口缩放时，浏览器重绘、布局计算更频繁，DOM 尺寸获取（如 $('#GridView1').width()）可能返回 0 或不稳定值，叠加多重监听器竞争执行，极易引发 scrollLeft 同步错乱、事件吞吐阻塞，甚至 jQuery 内部事件队列异常——尤其在低缩放率下渲染压力增大时，问题被显著放大。
✅ 正确做法：每次重新绑定前，先解绑旧监听器，确保唯一性。修改后的 TopScrollBar() 如下：
function TopScrollBar() {
// 同步宽度：确保顶部滚动条容器宽度匹配 GridView 实际渲染宽度
const gridWidth = $('#GridView1').outerWidth(true) || 0;
$('#divWidth').width(gridWidth);
// ✅ 关键修复：先 off 再 on，避免重复绑定
$("#divScroll")
.off('scroll.topSync') // 使用命名空间精准解绑
.on('scroll.topSync', function () {
$("#GridContainer").scrollLeft($(this).scrollLeft());
});
$("#GridContainer")
.off('scroll.gridSync')
.on('scroll.gridSync', function () {
$("#divScroll").scrollLeft($(this).scrollLeft());
});
}? 优化说明与注意事项：
- 命名空间解绑（.off('scroll.topSync')）：比无参数 .off('scroll') 更安全，避免误删其他业务 scroll 事件；
- 使用 .outerWidth(true)：包含 padding 和 border，更准确匹配实际滚动区域；
- 防御性判断：|| 0 防止 width() 返回 undefined 导致样式异常；
- 移除冗余 resize 绑定风险：若页面含动态内容加载或 AJAX 更新，建议在 TopScrollBar() 开头添加 $("#divScroll, #GridContainer").off('.topSync'); 全局清理；
- CSS 补充建议：为提升小屏/缩放下的稳定性，可增加：
#divScroll, #GridContainer {
-webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
}
#divScroll {
overflow-x: auto; /* 替代 scroll，避免无内容时仍显示空滚动条 */
scrollbar-width: none; /* Firefox 隐藏原生滚动条 */
}
#divScroll::-webkit-scrollbar { display: none; } /* Chrome/Safari 隐藏 */? 总结：该问题并非浏览器缩放的“bug”，而是事件管理不严谨在特定渲染压力场景下的必然暴露。通过事件去重 + 宽度容错 + 样式增强三步优化，即可彻底解决顶部滚动条在任意缩放比例下的同步失效问题，保障 ASP.NET WebForms 页面在现代多设备、多缩放环境下的稳定交互体验。
