从隐藏的 div 显示的 jScrollPane 问题答案

【问题标题】：jScrollPane problem with showing from a hidden div从隐藏的 div 显示的 jScrollPane 问题
【发布时间】：2015-01-07 19:05:19
【问题描述】：

我正在使用http://www.kelvinluck.com/projects/jscrollpane-custom-cross-browser-scrollbars/ 来形成我自己的自定义滚动条，我几乎可以使用它，但是当然有一个小问题阻碍了我完成这个项目。

当我将容器 div 和滚动窗格 div（包含内容）放置在站点中的某个位置时，它可以正常工作，但我需要将滚动条放在一个开始隐藏的 div 中。但是，当用户单击以显示 div 时，它确实显示了 div，但滚动窗格 div 保持隐藏状态。现在我读到我需要使用 reinitialise 但我不知道在哪里放置它。

我使用这个 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}
        );
    });

【问题讨论】：

标签： jquery jscrollpane hidden

【解决方案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);
});

【讨论】：

嘿@ShankarSangoli 感谢您的快速响应，但可悲的是，这对您的情况没有帮助。我猜这是因为 (this) 元素，因为这并不意味着当前隐藏的 div。此外，隐藏 div (.social_media_updates_extended_view) 的状态更改为 display:block 当它处于活动状态而不是 display:visible 时，我在代码 if($(this).is(':visible')){ 中将其更改为 if( $(this).is(':block')){ 但这也没有帮助。
@Peter - 仅供参考。 $(this).is(':visible') 是检查元素是否可见的方法。看看这个api.jquery.com/visible-selector
感谢您对此的见解，但您仍然能想到它无法正常工作的原因吗？
你想在哪个元素上应用jScrollPane插件？
我用用于该项目的 div 元素制作了一个小型 jsFiddle：jsfiddle.net/ZbtBW/1 显然这种方式有效，因为它不使用 jScrollPane 插件。

【解决方案2】：

添加 autoReinitialise: true

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

【讨论】：