17370845950

本文解决 jquery 实现的顶部同步滚动条在浏览器窗口缩放至 90% 以下时失灵的问题，核心原因是重复绑定 scroll 事件导致冲突，需在每次重绑前调用 `.off('scroll')` 清理旧监听器。

在 ASP.NET WebForms 中使用 jQuery 模拟顶部水平滚动条（与底部 GridView 同步）时，常见做法是通过 $(window).resize() 触发 TopScrollBar() 函数，动态调整顶部滚动容器宽度并绑定双向 scroll 事件。但原代码存在一个关键缺陷：每次窗口缩放都会调用 .on('scroll', ...) 而未解绑先前绑定的事件处理器，导致事件监听器不断累积。

当浏览器缩放到 90% 以下（尤其在高 DPI 或缩放渲染模式下），DOM 尺寸计算可能触发多次 resize 回调，叠加大量重复 scroll 监听器。这不仅造成性能下降，更会引发事件执行顺序混乱、scrollLeft 同步错位，甚至因 jQuery 内部事件队列异常而导致滚动行为“看似失效”。

✅ 正确做法是在每次绑定前显式

function TopScrollBar() {
    // 同步顶部 divWidth 宽度（确保与 GridView1 实际渲染宽度一致）
    const gridWidth = $('#GridView1').outerWidth(true);
    $('#divWidth').width(gridWidth);

    // 关键修复：先 off 再 on，避免重复绑定
    $("#divScroll").off('scroll').on('scroll', function () {
        $("#GridContainer").scrollLeft($(this).scrollLeft());
    });

    $("#GridContainer").off('scroll').on('scroll', function () {
        $("#divScroll").scrollLeft($(this).scrollLeft());
    });
}

⚠️ 补充注意事项：

• 避免在 resize 中频繁重绘：resize 事件高频触发，建议添加防抖（debounce），例如使用 setTimeout 延迟执行（延迟 100–200ms），防止过度计算；
• 确保 DOM 可见性与尺寸就绪：$('#GridView1').width() 在 GridView 尚未渲染完成时可能返回 0，建议结合 $(document).ready() 和 PageRequestManager.endRequest（如原代码所示）并验证元素存在；
• CSS 兼容性增强：为 #divScroll 添加 white-space: nowrap; 和 overflow-x: auto（而非 scroll），使其在内容不足时不强制显示空滚动条；同时确认 #GridContainer 设置了固定 width 或 min-width，避免因父容器收缩导致子元素宽度塌陷；
• 现代替代方案建议：若项目允许升级，可考虑使用 CSS position: sticky + overflow-x: auto 配合 scroll-snap，或采用纯 CSS 方案（如双 结构 + transform: translateX()）减少 JS 依赖。

  综上，问题本质并非窗口缩放比例本身，而是事件管理缺失引发的逻辑雪崩。修复后，顶部滚动条将在任意缩放级别下稳定同步，兼顾兼容性与可维护性。