窗口缩放到90%以下时jQuery顶部滚动条失效问题求助

核心问题排查 #

1. 重复绑定滚动事件：每次调用TopScrollBar()都会重复绑定scroll事件，多次触发后会导致滚动同步逻辑混乱，尤其在窗口缩放时问题更明显。
2. HTML标签未闭合：divScroll标签缺少闭合符>，DOM渲染异常可能导致缩放特定比例时布局失效。
3. 宽度计算精度问题：窗口缩放时，浏览器对元素宽度的像素舍入处理可能导致divWidth与GridView1宽度不匹配，顶部滚动条失去滚动触发条件。

修复后的完整代码 #

HTML与ASP.NET部分

<script type="text/javascript" src="/Scripts/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function () {
        initTopScrollBar();
    });

    $(document).ready(function () {
        initTopScrollBar();
    });

    // 防抖处理resize事件，避免频繁触发
    var resizeTimeout;
    $(window).resize(function () {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(initTopScrollBar, 100);
    });

    function initTopScrollBar() {
        // 先解绑原有滚动事件，避免重复绑定
        $("#divScroll").off('scroll');
        $("#GridContainer").off('scroll');

        // 同步宽度：使用outerWidth确保包含padding和border，取整避免小数像素问题
        var gridWidth = $('#GridView1').outerWidth(true);
        $('#divWidth').width(Math.ceil(gridWidth));
        // 确保divScroll的容器宽度和GridContainer一致
        $('#divScroll').width($('#GridContainer').width());

        // 双向滚动同步
        $("#divScroll").on('scroll', function () {
            $("#GridContainer").scrollLeft($(this).scrollLeft());
        });

        $("#GridContainer").on('scroll', function () {
            $("#divScroll").scrollLeft($(this).scrollLeft());
        });
    }
</script>
<!-- 修复标签闭合问题 -->
<div id="divScroll" style="overflow-x: scroll; overflow-y: hidden; height: 20px;">
    <div id="divWidth"></div>
</div>
<div id="GridContainer" style="overflow-x: scroll;">
    <asp:GridView ID="GridView1" runat="server" CssClass="gridviewStyle" ClientIDMode="Static">
    </asp:GridView>
</div>

CSS部分

.gridviewStyle {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
}
/* 可选：确保容器盒模型一致，避免宽度偏差 */
#GridContainer, #divScroll {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

关键修复点说明 #

• 事件防抖：给resize事件添加防抖处理，避免窗口缩放时频繁触发宽度计算和事件绑定，提升稳定性。
• 解绑重复事件：每次初始化前解绑原有scroll事件，防止多次绑定导致的逻辑冲突。
• 像素精度处理：使用outerWidth(true)获取包含padding和border的完整宽度，并用Math.ceil()取整，避免小数像素导致滚动条失效。
• 修复DOM结构：闭合divScroll标签，确保浏览器正确渲染布局。

内容的提问来源于stack exchange，提问作者Itay6