jScrollpane + IE7:滚动条显示，但不能滚动-不能单击箭头，不能绘制条形帮助？

Question

我有jScrollpane在一个100%的宽度div，自动高度，动态内容加载与自动再国产化。工作很好，但在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-索引:)

您可以只删除图像上的一些空间距，因为它在滚动面板的顶部是透明的。

(测试方法是更改z-索引/并将地图图像的负值增加到右侧：-100 to；)