jquery顶部滚动条在窗口大小调整到小于90%时停止工作

bxfogqkk  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(110)

我正在使用ASP.NETVB,我实现了一个顶部滚动条,它模仿了默认的底部滚动条。出于某种原因当我调整窗口大小时,如果大小低于90%,顶部滚动条将停止工作。一旦大小恢复到90%或以上,它就继续起作用……我找不到解决办法或任何帮助...
我试着限制宽度的宽度是90%(当它仍然工作),但它没有工作...看起来像是调整大小的动作在90%以下是单独做的...而不是宽度本身我可能是错的……
这是代码:

<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() {
        // Set the width of divWidth the same as GridView1
        $('#divWidth').width($('#GridView1').width());

        // Synchronize divScroll's scroll with GridContainer
        $("#divScroll").on('scroll', function () {
            $("#GridContainer").scrollLeft($(this).scrollLeft());
        });

        // Synchronize GridContainer's scroll with 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;
}

字符串

eaf3rand

eaf3rand1#

我不确定这是否是你唯一的问题,但on通常需要一个off在它之前。
您正在添加新的事件侦听器,而没有删除旧的事件侦听器。
试试这个:

function TopScrollBar() {
        // Set the width of divWidth the same as GridView1
        $('#divWidth').width($('#GridView1').width());

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

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

字符串

相关问题