Lorsque la fenêtre est réduite à moins de 90 %, la barre de défilement supérieure de jQuery échoue

Question

J'utilise ASP.NET VB et j'ai implémenté une barre de défilement supérieure qui simule la barre de défilement inférieure par défaut. Pour une raison quelconque... lorsque je redimensionne la fenêtre, la barre de défilement supérieure cesse de fonctionner si la taille descend en dessous de 90 %... elle continue de fonctionner dès que la taille revient à 90 % ou plus... Je ne trouve pas de solution ni d'aide...

J'ai essayé de limiter la largeur à 90% de la largeur, ce qui fonctionnait toujours, mais cela n'a pas fonctionné... Il semble que l'opération de redimensionnement à moins de 90% soit la seule cause du problème... pas la largeur elle-même. .. Cependant, je peux me tromper...

Voici le 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

Je ne sais pas si c'est votre seul problème, mais vous devez généralement utiliser off avant d'utiliser on.

Vous ajoutez de nouveaux auditeurs d'événements mais vous ne supprimez pas les anciens.

Essayez ceci :

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