jquery - fancybox 中的 Jscrollpane 不起作用

Question

我在 fancybox 中使用 jscrollpane 时遇到问题。尽管经过一番噩梦般的努力，我使自定义滚动条出现，但它仅在我第一次打开灯箱时出现。当我关闭灯箱并尝试再次打开它时，jscrollpane 似乎找不到任何内容，因此无法正常运行。

不断观察 firebug，我注意到当我关闭 lightbox 时，只有 jspScrollable 类(由 jscrollpane 添加)保留下来，但所有额外的 html 都消失了。当我再次打开它时，不再创建额外的 html。看起来这次 jscrollpane 在内容加载之前运行。

这是我的脚本:

    <script type="text/javascript" >

    $(document).ready(function() {

            $("a.enlarge-image").fancybox(
                 {
                   'overlayColor' : '#000',
                   'overlayOpacity' : '0.6',
                   'autoScale' : false,
                   'onComplete' : (function(){
                         $('#fancybox-content').jScrollPane();

            })
        })
    })

     </script>

任何帮助将不胜感激。

Answer 1

我终于解决了这个问题。我首先创建了一个 jscrollpane 对象，每次关闭 fancybox (onClosed) 时都会销毁该对象，并在每次打开 fancybox (onComplete) 时重新创建它。

现在这是我的脚本:

    <script type="text/javascript">
        var scrollpane;
            $(document).ready(function() {

                $("a.enlarge-image").fancybox(
                                        {       
                'overlayColor' : '#000',
                'overlayOpacity' : '0.6',
                'autoScale' : false,
                'onComplete' : (function(){
                    scrollpane = $('#fancybox-content').jScrollPane({showArrows: true, scrollbarWidth : '20'}).data().jsp;
                       }),
                'onStart' : (function(){
                        }),
                'onClosed' : (function() {

                     scrollpane.destroy();
                       })

                    });
                })
                    </script>

这似乎使 fancybox 和里面的 jscrollpane 完美地协同工作。然而，我在 IE7 和 IE6 浏览器上发现了一个问题。因此，当我关闭覆盖窗口时，我收到此错误:'0.nodeName' 为 null 或不是对象

我认为问题是当我在关闭时销毁滚动 Pane 时，没有声明的变量scrollpane。我只是不知道如何解决这个问题。

请问有什么想法吗？干杯..