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 和 IE7 上发现了一个问题。 IE6浏览器。因此，当我关闭覆盖窗口时，我收到此错误：'0.nodeName' is null or not an Object

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

有什么想法吗？干杯..

Answer 2

遇到了同样的问题，花了大约 10 个小时让滚动窗格在 fancybox 中工作。
所以。您应该使用旧的花哨 1.3.4，并使用 jscrollpane 版本：2.0.0beta12，上次更新：2012-09-27来自演示的 github。

JS 代码：

$.fancybox(img, {
                    'padding': 0,
                    'width': 1000,
                    'centerOnScroll': false,
                    'overlayOpacity' : 0,
                    'autoScale' : false,
                    'onComplete' : (function(){
                        if (scrollpane) scrollpane.reinitialise();
                        else 
                        scrollpane = $('.fancybox-content').jScrollPane({showArrows: false,
                        verticalGutter: 30}).data().jsp;                    
                           })
                }); 

要使其在关闭并单击下一个按钮后正常工作，只有一件事就是添加到 jquery.jscrollpane.js 第 89 行。

pane = undefined;