jScrollpane + IE7: полоса прокрутки показывает, но не может прокрутить - не можете нажимать стрелки, не можете нарисовать панель - помогите? - PullRequest
Новая
       23

jScrollpane + IE7: полоса прокрутки показывает, но не может прокрутить - не можете нажимать стрелки, не можете нарисовать панель - помогите?

1 голос
/ 14 октября 2011

У меня есть jScrollpane с шириной деления 100%, автоматическое увеличение, динамическая загрузка содержимого с автоматической повторной инициализацией. Работает нормально, но не в IE7.

Показывает полоса прокрутки, кажется, что высота рассчитывается нормально, но когда я нажимаю стрелки или пытаюсь нарисовать полосу для прокрутки, ничего не происходит.

Кто-нибудь знаком с этим? Что я делаю неправильно? Любая помощь с благодарностью!

Это URL сайта: 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;
}

1 Ответ

1 голос
/ 14 октября 2011

Это потому, что ваше изображение MAP перекрывается, и, следовательно, вы не можете добраться до прокрутки.У вас не должно быть более высокого z-индекса поверх ссылки:)

Вы можете просто удалить часть пустого промежутка на изображении, так как его прозрачная верхняя часть панели прокрутки в любом случае.

(Протестировано с помощью изменения z-index / и увеличения значения минус изображения MAP вправо: -100px;)

...