Question

我正在使用http://www.kelvinluck.com/projects/jscrollpane-custom-cross-browser-scrollbars/作为一种形成我自己的自定义滚动条的方法，我几乎让它工作但是当然有一个小问题妨碍我完成项目。

当我将容器div和滚动窗格div（包含内容）放置在网站的某个位置时，它可以正常工作，但我需要将div中的滚动条隐藏起来。但是，当用户单击以显示div时，它确实显示div但滚动窗格div保持隐藏状态。现在我读到我需要使用重新初始化，但我无法弄清楚将它放在哪里。

我使用这个jquerycode来隐藏div

// Begin Toggle Hide functie off the extended update view
    jQuery('.social_media_updates_extended_view').hide();

这部分使我能够在不同的div之间切换。

        jQuery(".update_extend span").css('cursor', 'pointer').click(function() {
            var $this = $(this);
            $('.social_media_updates_extended_view_arrow').not($this.next("div")).fadeOut(200);
            $this.next("div").fadeToggle(200);
        });

            var $container = $(".wrapper_update");
                $container.delegate(".update_extend .btnFadeIn", "click", function(event) {
                    var $view = $(this).closest(".wrapper_update").find(".social_media_updates_extended_view").fadeToggle(200);

                    $container.find(".social_media_updates_extended_view").not($view).fadeOut(200);
            })
// End Toggle Hide functie off the extended update view.

这是我用来调用滚动条的部分

// Begin Custom Scroll in Div
    jQuery(function(){
        jQuery('.scroll-pane').jScrollPane(
            {reinitialise: true}
        );
    });

Answer 1

试试这个

jQuery(".update_extend span").css('cursor', 'pointer').click(function() {
            var $this = $(this);
            $('.social_media_updates_extended_view_arrow')
            .not($this.next("div")).fadeOut(200);
            $this.next("div").fadeToggle(200);
});

var $container = $(".wrapper_update");
$container.delegate(".update_extend .btnFadeIn", "click", function(event){
   var $view = $(this).closest(".wrapper_update")
               .find(".social_media_updates_extended_view")
               .fadeToggle(200, function(){

                     //Here we should check if the container is visible
                     //then reinitialise it
                     if($(this).is(':visible')){
                         jQuery('.scroll-pane').jScrollPane(
                                {reinitialise: true}
                         );
                      }


                });

    $container.find(".social_media_updates_extended_view")
    .not($view).fadeOut(200);
});

Answer 2

添加 autoReinitialise：true

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

jScrollPane从隐藏的div显示的问题

2 个答案: