Question

我有一个包含两个插件的网站： jscrollpane和fancybox。

我想要一个带有jscrollpane的div来滚动直到完成。在里面有许多图像可以用fancybox点击。

当我向下滚动滚动条（滚动窗格）并单击图像时，不会打开fancybox，而是转到div的顶部。为什么？如果我不滚动div并单击第一张照片，则fancybox可以正常工作。如何解决这个问题？

这是我的javascript和html

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


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

    });



    $("a.fancy").fancybox({
        'transitionIn'  :   'fade',
        'transitionOut' :   'fade',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   true
    });

});


</script>

<div class="scroll-pane">
                    <a href="img/gallery/big/01.jpg" class="fancy" rel="group"><img src="img/gallery/thumb/01.jpg" class="gallery" style="margin-top:0px;"/></a>
                    <a href="img/gallery/big/02.jpg" class="fancy" rel="group"><img src="img/gallery/thumb/02.jpg" class="gallery" style="margin-top:0px;"/></a>
                    <a href="img/gallery/big/03.jpg" class="fancy" rel="group"><img src="img/gallery/thumb/03.jpg" class="gallery" style="margin-top:0px;"/></a>
                    <a href="img/gallery/big/04.jpg" class="fancy" rel="group"><img src="img/gallery/thumb/04.jpg" class="gallery" style="margin-top:0px;"/></a>
                    <a href="img/gallery/big/05.jpg" class="fancy" rel="group"><img src="img/gallery/thumb/05.jpg" class="gallery" style="margin-top:0px;"/></a>
                    <a href="img/gallery/big/06.jpg" class="fancy" rel="group"><img src="img/gallery/thumb/06.jpg" class="gallery" /></a>
</div>

滚动窗格的CSS

.scroll-pane
{
    width: 98%;
    height: 380px;
    overflow: auto;
}

jquery插件jscrollpane和fancybox转到顶部

0 个答案: