本文详解因重复绑定 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 页面在现代多设备、多缩放环境下的稳定交互体验。