我正在使用ASP.NET VB,并且我已經(jīng)實現(xiàn)了一個模擬默認(rèn)底部滾動條的頂部滾動條。 由于某種原因...當(dāng)我調(diào)整窗口大小時,如果大小低于90%,頂部滾動條就會停止工作...只要大小恢復(fù)到90%或以上,它就會繼續(xù)工作... 我找不到解決方案或任何幫助...
我嘗試將寬度限制為仍然工作的90%的寬度,但它沒有起作用...似乎小于90%的調(diào)整大小操作是導(dǎo)致問題的唯一原因...而不是寬度本身... 不過,我可能是錯的...
這是代碼:
<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的寬度設(shè)置為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; }
我不確定這是否是你唯一的問題,但是通常在使用on之前需要使用off。
你正在添加新的事件監(jiān)聽器,但沒有移除舊的。
試試這個:
function TopScrollBar() { // 設(shè)置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()); }); }