JScrollPane không hoạt động đúng với nội dung ẩn

Question

Tôi đã cài đặt jScrollPane trên trang web của mình và không thể hoạt động.

Trang web của tôi hoạt động như sau: từ trang chính, các trang được tải động bằng phương pháp load() của jQuery. Trong trang tôi tải, tôi có đoạn mã sau để khởi chạy jScrollPane:

$(function(){ 
    $('.scroll-pane').jScrollPane(); 
}); 

Có vẻ như được gọi. Không có vấn đề cho đến nay tôi đoán. Vấn đề là trang, lúc đầu, không đủ dài để cần một thanh cuộn. Tôi đã ẩn nội dung chỉ hiển thị trên các hành động cụ thể (nghĩa là nhấp vào nút hiển thị nội dung của một đoạn nhất định) và khi tôi nhấp để hiển thị nội dung của div ẩn, thanh cuộn không xuất hiện.

Tôi cũng đã cố gắng gọi $('.scroll-pane').jScrollPane(); như tôi hiển thị các nội dung mới (ví dụ: trong trường hợp gây nên .show() trên ẩn div Tôi cũng gọi $('.scroll-pane').jScrollPane();) nhưng tôi đã không thành công với điều đó một trong hai.

Có ai có thể giúp tôi không?

Cảm ơn

EDIT:

tôi quên đề cập đến cấu trúc của trang: Tôi có một div trong đó có class="scroll-pane" và được nạp với tải trang và nó chứa các div ẩn nhỏ mà hiển thị khi nhấp trên các khu vực cụ thể. Tôi muốn thêm một thanh cuộn vào div với khung cuộn lớp để làm cho nội dung của div cuộn được hiển thị (ngay bây giờ nội dung nằm trong kích thước của div nhưng nó không thể cuộn được vì không có thanh cuộn jScrollPane nào được hiển thị).

Cập nhật:

Tôi cố gắng để đưa $('.scroll-pane').jScrollPane(); trong callback của phương pháp .show() của divs tôi và cố gắng đưa class="scroll-pane" cho những divs xuất hiện, nhưng một lần nữa không có gì được hiển thị (thanh cuộn không xuất hiện và div không thể cuộn được).

Answer 1

Kiểm tra demo này được cung cấp bởi các nhà phát triển của các plugin

http://jscrollpane.kelvinluck.com/invisibles.html

Khi nguyên tố này là lần đầu tiên cho thấy bạn chỉ cần phải (lại) khởi sự ScrollPane (hoặc thậm chí bạn có thể sử dụng autoReinitialise nếu bạn thích) và chiều rộng và chiều cao của nó sẽ được tính toán chính xác.

Tất cả những gì bạn cần là

$(function(){ 
    $('.scroll-pane').jScrollPane({autoReinitialise: true}); 
}); 

và có thể là phiên bản mới của các plugin

Answer 2

tôi đề nghị sử dụng tài sản tầm nhìn css thay vì tự động reinitialising. Mỗi lần bạn gọi phương thức show(), jScrollPane reinitialises chính nó. Điều này cần có thời gian và có tác động đến hoạt ảnh.

Nếu bạn sử dụng các phương thức trượt ..(), thì hoạt ảnh bắt đầu đúng cách, nhưng vùng chứa có thể cuộn (và các phần tử của nó) xuất hiện một chút sau đó và trông có vẻ xấu.

var wrapper = jQuery('#gallery-album-preview-wrapper'); 
if (wrapper.css("visibility") == "hidden") { 
    wrapper.css("visibility", "visible").css("display", "none"); 
} 
if (wrapper.is(":hidden")) { 
    wrapper.slideDown(1000); 
} else { 
    wrapper.slideUp(1000); 
}