search

Home  >  Q&A  >  body text

When the window is reduced to less than 90%, the jQuery top scroll bar fails

I'm using ASP.NET VB, and I've implemented a top scrollbar that simulates the default bottom scrollbar. For some reason... when I resize the window, the top scrollbar stops working if the size goes below 90%... it continues to work as soon as the size goes back to 90% or above... I can't find a solution or any help...

I tried limiting the width to 90% of the width which still worked, but it didn't work... It seems that resize operations less than 90% are the only cause of the problem... not the width itself... However, I could be wrong...

This is the 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;
}

P粉238433862P粉238433862470 days ago673

reply all(1)I'll reply

  • P粉034571623

    P粉0345716232023-09-13 10:30:02

    I'm not sure if this is your only problem, but generally you need to use off before using on.

    You are adding a new event listener but not removing the old one.

    Try this:

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

    reply
    0
  • Cancelreply