Saya menggunakan ASP.NET VB dan saya telah melaksanakan bar skrol atas yang menyerupai bar skrol bawah lalai. Atas sebab tertentu... apabila saya mengubah saiz tetingkap, bar skrol atas berhenti berfungsi jika saiznya di bawah 90%... ia terus berfungsi sebaik sahaja saiznya kembali kepada 90% atau ke atas... Saya tidak dapat mencari penyelesaian atau sebarang bantuan...
Saya cuba mengehadkan lebar kepada 90% lebar yang masih berfungsi, tetapi ia tidak berfungsi ... Nampaknya operasi ubah saiz kurang daripada 90% adalah satu-satunya punca masalah ... bukan lebar itu sendiri. .. Namun, saya boleh tersilap...
Ini kodnya:
<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; }
Saya tidak pasti sama ada ini sahaja masalah anda, tetapi biasanya anda perlu menggunakan off sebelum menggunakan on.
Anda menambah pendengar acara baharu tetapi tidak mengalih keluar pendengar acara lama.
Cuba ini:
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()); }); }