jQuery tùy chỉnh nội dung cuộn không hiển thị khi div có tham số ẩn

Question

Tôi có jQuery tùy chỉnh nội dung cuộn trên trang web của tôi trong một div. Nội dung div có thông số ("#content").hide(). div hiển thị khi tải trang và trình cuộn nội dung tùy chỉnh jQuery hoạt động hoàn hảo.

Nhưng nếu nội dung div không hiển thị khi trang tải, trình cuộn nội dung tùy chỉnh jQuery không hiển thị và không hoạt động. Tôi nhận thấy rằng khi bạn thu nhỏ hoặc phóng to cửa sổ, màn hình cuộn sẽ hiển thị. Tôi có ví dụ nhỏ về URL này: http://www.frantatoulen.wz.cz/

Trường hợp có thể xảy ra sự cố?

Answer 1

Vấn đề là khi # nội dung bị ẩn, tập lệnh plugin không thể tính toán độ dài nội dung (phần tử ẩn có kích thước bằng không). Do đó, kịch bản giả định rằng nội dung không cần một thanh cuộn.

Giải pháp A:

Bạn cần phải gọi cập nhật phương pháp của các plugin sau Toggles nội dung của bạn và trở nên rõ ràng (trang chủ Plugin có thông tin và các ví dụ về việc sử dụng các phương pháp và các thông số). Bên trong chức năng nhấp chuột, thêm dòng sau vào cuối file:

$("#tlacitko").click(function(){ 
    $("#content").toggle(); 
    $("#content").mCustomScrollbar("update"); 
}); 

Lưu ý: Các thanh cuộn làm việc khi bạn thay đổi kích thước trình duyệt vì nó tự động gọi phương thức cập nhật về sự kiện cửa sổ thay đổi kích thước.

Giải pháp B:

Bạn có thể dễ dàng thiết lập các tham số tùy chọnupdateOnContentResize để đúng. Đây tự động gọi cập nhật phương pháp mỗi lần nội dung của bạn thay đổi chiều dài:

$("#content").mCustomScrollbar({ 
    advanced:{ 
     updateOnContentResize:true 
    } 
});