Wenn das Fenster auf weniger als 90 % verkleinert wird, schlägt die obere jQuery-Bildlaufleiste fehl

Question

Ich verwende ASP.NET VB und habe eine obere Bildlaufleiste implementiert, die die standardmäßige untere Bildlaufleiste simuliert. Aus irgendeinem Grund ... wenn ich die Größe des Fensters ändere, funktioniert die obere Bildlaufleiste nicht mehr, wenn die Größe unter 90 % sinkt ... sie funktioniert weiter, sobald die Größe wieder auf 90 % oder mehr sinkt ... Ich kann keine Lösung oder Hilfe finden...

Ich habe versucht, die Breite auf 90 % der Breite zu begrenzen, was immer noch funktioniert hat, aber es hat nicht funktioniert ... Es scheint, dass der Größenänderungsvorgang auf weniger als 90 % die einzige Ursache des Problems ist ... nicht die Breite selbst. .. Allerdings könnte ich mich irren...

Das ist der Code:

<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 () {
        TopScrollBar();
    });

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

    $(window).resize(function () {
        TopScrollBar();
    });

    function TopScrollBar() {
        // 将divWidth的宽度设置为GridView1的宽度
        $('#divWidth').width($('#GridView1').width());

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

        // 将GridContainer的滚动与divScroll同步
        $("#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;
}

Answer 1

我不确定这是否是你唯一的问题，但是通常在使用on之前需要使用off。

你正在添加新的事件监听器，但没有移除旧的。

试试这个：

function TopScrollBar() {
        // 设置divWidth的宽度与GridView1相同
        $('#divWidth').width($('#GridView1').width());

        // 将divScroll的滚动与GridContainer同步
        $("#divScroll").off('scroll').on('scroll', function () {
            $("#GridContainer").scrollLeft($(this).scrollLeft());
        });

        // 将GridContainer的滚动与divScroll同步
        $("#GridContainer").off('scroll').on('scroll', function () {
            $("#divScroll").scrollLeft($(this).scrollLeft());
        });
    }