jscrollpaneとfancyboxの2つのプラグインがあるサイトがあります。
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;
}