0

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

我想要一个带有 jscrollpane 的 div 滚动直到完成。里面有很多可以用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;
}
4

0 回答 0