Thanh cuộn ẩn trừ khi trang đổi kích thước

Tôi cần một thanh cuộn tùy chỉnh cho một dự án cá nhân (bằng "tuỳ chỉnh", tôi có nghĩa là hiệu ứng quán tính cơ bản, hình ảnh tùy chỉnh, v.v.). Lựa chọn của tôi là mCustomScrollbar.Thanh cuộn ẩn trừ khi trang đổi kích thước

Tài liệu này thực sự rất rõ ràng và tôi chưa gặp bất kỳ sự cố nào khi triển khai tập lệnh, nhưng dường như chỉ hoạt động khi tôi đổi kích thước trang, như thể không cần cuộn.

Thực tế, thanh cuộn có style="display: hidden" trên trang được tải đầy đủ, như trong số question (nhưng tôi không thể tìm thấy bất kỳ câu trả lời hữu ích nào).

Tôi tin rằng có một số vấn đề liên kết với heightslidesjs (mà tôi đang sử dụng cũng), nhưng tôi chỉ không thể tìm thấy nó ... đây là một số mã:

(There's toàn bộ trang, vì vậy bạn có thể xem mã với con đom đóm ... chỉ cần đi theo "Pulcini" để xem nội dung dài)

<head> 
    <!-- everything is included --> 
    <link href="css/style.css" type="text/css" rel="stylesheet" /> 
    <link href="css/jquery.mCustomScrollbar.css" type="text/css" rel="stylesheet" /> 
    <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script> 
    <script type="text/javascript" src="js/jquery.mCustomScrollbar.js"></script> 
    <script> 
    $(function(){ 
     $("#slides").slides({ 
     generatePagination: false, 
     pagination: true, 
     paginationClass: 'pagination' 
     }); 
    }); 
    </script> 
    <script> 
    (function($){ 
     $(window).load(function(){ 
     $("#slide2").mCustomScrollbar(); 
     }); 
    })(jQuery); 
    </script> 
</head> 
<body> 
    <div id="slides"> 
    <!-- other stuff --> 
    <div class="slides_container"> 
     <div id="slide1"> 
     <h2>Uova</h2> 
     <p>Text1...</p> 
     </div> 
     <!-- slide2 is the scrollbar div --> 
     <div id="slide2"> 
     <h2>Blabla</h2> 
     <p>Lorem ipsum</p><br /> 
     </div> 
    </div> 
    </div> 
</body>

CSS:

div#slides { 
    height: 506px; 
} 
.slides_container { 
    width: 900px; 
    height: 506px; 
} 

.slides_container, div#slide1, div#slide2, div#slide3, { 
    width: 808px; 
    height: 366px; 
    display: block; 
    float: left; 
    overflow-y: auto; 
} 

.slides_container { 
    margin-top: 30px; 
    margin-bottom: 30px; 
    height: 366px; 
}

Nguồn

2012-09-10 trascendency

Tôi có cùng một vấn đề. Vì vậy, tôi đã thay đổi mã chất lỏng cho updateOnBrowserResize: true và updateOnContentResize: true và bây giờ nó hoạt động tuyệt vời với tất cả javascript.

(function($) { 
    $(window).load(function() { 
    $("#content_1").mCustomScrollbar({ 
     scrollEasing:"easeOutCirc", 
     mouseWheel:"auto", 
     autoDraggerLength:true, 
     advanced:{ 
     updateOnBrowserResize:true, 
     updateOnContentResize:true 
     } // removed extra commas 
    }); 
    }); 
})(jQuery);

Nguồn

2012-09-11 05:42:03 txirrindulari

Làm việc tuyệt vời. Cảm ơn bạn đã trả lời :) – trascendency

Đây là giải pháp tốt nhất mà tôi từng thấy. Tùy chọn sửa vấn đề này cho tôi là: 'advanced: {updateOnContentResize: true}' –

Bạn đang ini tializing mCustomScrollbar trong khi container của nó trong vẫn còn ẩn, do đó, trình duyệt không thể tính toán chiều cao của div. Bạn sẽ cần kích hoạt sự kiện thay đổi kích cỡ khi div hiển thị hoặc không khởi chạy thanh cuộn cho đến khi nó trở thành hoạt động đầu tiên trên trang.

Nguồn

2012-09-11 02:32:42 Stephen

Tuyệt vời. Cảm ơn nhiều! – trascendency

http://manos.malihu.gr/jquery-custom-content-scroller/

đây là liên kết rất tốt đẹp cho thanh tùy chỉnh cuộn Tôi cũng sử dụng plug-in này trong các dự án của tôi bạn có thể dễ dàng tùy chỉnh nó và thanh cuộn lồng nhau cũng có sẵn ở đây.

Nguồn

2013-07-24 12:39:44

Thanh cuộn ẩn trừ khi trang đổi kích thước

Trả lời

Các vấn đề liên quan