當視窗縮小至不足90%時,jQuery頂部滾動條失效
P粉238433862
P粉238433862 2023-09-12 12:33:19
0
1
666

我正在使用ASP.NET VB,並且我已經實作了一個模擬預設底部滾動條的頂部滾動條。 由於某種原因...當我調整視窗大小時,如果大小低於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() {
        // 将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粉238433862
P粉238433862

全部回覆(1)
P粉034571623

我不確定這是否是你唯一的問題,但通常在使用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());
        });
    }
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板