Question

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

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

有没有人熟悉这个？我究竟做错了什么？非常感谢任何帮助！

滚动条在子页面上实现，例如： 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

这是因为您的MAP图像重叠，因此无法到达滚动条。在链接之上没有更高的z-index：）

你可以删除图像上的一些空间距，因为它无论如何都是透明的滚动面板。

（通过更改z-index /并将MAP图像的负值增加到右边来测试它：-100px;）

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

1 个答案: