Apabila tetingkap dikurangkan kepada kurang daripada 90%, bar skrol atas jQuery gagal

Question

Saya menggunakan ASP.NET VB dan saya telah melaksanakan bar skrol atas yang menyerupai bar skrol bawah lalai. Atas sebab tertentu... apabila saya mengubah saiz tetingkap, bar skrol atas berhenti berfungsi jika saiznya di bawah 90%... ia terus berfungsi sebaik sahaja saiznya kembali kepada 90% atau ke atas... Saya tidak dapat mencari penyelesaian atau sebarang bantuan...

Saya cuba mengehadkan lebar kepada 90% lebar yang masih berfungsi, tetapi ia tidak berfungsi ... Nampaknya operasi ubah saiz kurang daripada 90% adalah satu-satunya punca masalah ... bukan lebar itu sendiri. .. Namun, saya boleh tersilap...

Ini kodnya:

<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

Saya tidak pasti sama ada ini sahaja masalah anda, tetapi biasanya anda perlu menggunakan off sebelum menggunakan on.

Anda menambah pendengar acara baharu tetapi tidak mengalih keluar pendengar acara lama.

Cuba ini:

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