jScrollpane + IE7：滚动条显示，但无法滚动 - 无法点击箭头，无法绘制条形图帮助？

Question

我有jScrollpane在100％宽div，自动heigt，动态内容加载与自动reïnitialise。工作正常，但不在IE7中。

滚动条显示，高度似乎计算得很好，但是当我单击箭头或尝试绘制滚动条时，没有任何反应。

有没有人熟悉这个？我究竟做错了什么？任何帮助是极大的赞赏！

这是网站网址： http://www.sporeninhetland.nl

的滚动条上的子页面实现，例如这一个： http://www.sporeninhetland.nl/over-de-hertogskuil-te-baarn/

这是我的标记：

<div class="entry scroll-pane"> 
<?php the_content(); ?> 
</div><!– sluit entry –> 

我有这在标题：

<script type="text/javascript" id="sourcecode"> 
    $j=jQuery.noConflict(); 
    $j(function() 
    { 
     $j('.scroll-pane').jScrollPane({ 
     showArrows: true, 
     autoReinitialise: true}); 
    }); 
</script> 

这是我的CSS：

/* Styles specific to this particular page */ 
.scroll-pane 
{ 
    width: 100%; 
    height: auto; 
    overflow: auto; 
} 


/* 
* CSS Styles that are needed by jScrollPane for it to operate correctly. 
* 
* Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane 
* may not operate correctly without them. 
*/ 

.jspContainer { 
    overflow: hidden; 
    position: relative; 
} 
.jspPane { 
    position: absolute; 
} 
.jspVerticalBar { 
    background: none repeat scroll 0 0 none; 
    height: 100%; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 16px; 
} 
.jspHorizontalBar { 
    background: none repeat scroll 0 0 none; 
    bottom: 0; 
    height: 16px; 
    left: 0; 
    position: absolute; 
    width: 100%; 
} 
.jspVerticalBar *, .jspHorizontalBar * { 
    margin: 0; 
    padding: 0; 
} 
.jspCap { 
    display: none; 
} 
.jspHorizontalBar .jspCap { 
    float: left; 
} 
.jspTrack { 
    background: url(scroll-images/groen-streepje.png) 0 0 repeat-y scroll; 
    position: relative; 
} 
.jspDrag { 
    background: none repeat scroll 0 0 #ACC314; 
    cursor: pointer; 
    left: 0; 
    position: relative; 
    top: 0; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
} 
.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { 
    float: left; 
    height: 100%; 
} 
.jspArrow { 
background: url(scroll-images/pijltjes.png) 0 0 no-repeat scroll; 
    cursor: pointer; 
    display: block; 
    text-indent: -20000px; 
} 
.jspArrow.jspDisabled { 
background: url(scroll-images/pijltjes.png) 0 -9px no-repeat scroll; /* ander kleur pijltje */ 
    cursor: default; 
} 
.jspVerticalBar .jspArrow { 
    height: 9px; 
} 
.jspHorizontalBar .jspArrow { 
    float: left; 
    height: 100%; 
    width: 16px; 
} 
.jspVerticalBar .jspArrow:focus { 
    outline: medium none; 
} 
.jspCorner { 
    background: none repeat scroll 0 0 #EEEEF4; 
    float: left; 
    height: 100%; 
} 
* html .jspCorner { 
    margin: 0 -3px 0 0; 
} 

.jspArrowUp 
{ 
background-position: 0 0; 
} 

.jspArrowDown 
{ 
background-position: -15px 0 !important; /* twee pijlen in één png zetten */ 
} 
.jspArrowDown.jspDisabled { 
background-position: -15px -9px !important; /* twee pijlen in één png zetten */ 
} 
.scroll-pane 
{ 
    width: 100%; 
overflow: auto; 
z-index: 99; 
} 

Answer 1

它，因为你的地图图像重叠，因此你不能达到表示ScrollEvent。在链接顶部没有更高的z-index :)

因为它无论如何都是透明的scrollpanel，所以你可以删除一些图像上的空白间距。

（通过改变的z-index /和MAP图像的负值提高到右测试它：-100px;）