Question

使用jScrollPane。我已经完全按照jScrollPane网站的说明在我的服务器上安装了。内容似乎滚动但默认窗口滚动条显示，样式化的jScroll垂直条和拖动栏根本不滚动。

我已经阅读了有关它的一些问题，而不是滚动最新的jquery所以我也尝试使用旧版本，但仍然没有运气。

我快速fiddle显示了这个问题。任何帮助，将不胜感激。我已经被困在这几天了。

html -

<div id="subpanel" class="nav_dialog displayed" style="height: 560px; left: ; display: block;">
<div class="close_link">
<a href="#" style="color: blue;">Close (x)</a>
</div>
<div class="scrollpane jspScrollable" id="subpanel_content" style="overflow: hidden; padding: 0px; width: 475px;" tabindex="0">
<div class="jspContainer" style="width: 475px; height: 520px;">
    <div class="jspPane" style="padding: 0px 65px 0px 0px; top: 0px; width: 396px;">
    <p><img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt=""></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>-</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>&nbsp;</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    <p>&nbsp;</p>
    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
    <p>-</p>
    <p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </p>
    </div>
    <div class="jspVerticalBar">
        <div class="jspCap jspCapTop"></div>
            <div class="jspTrack" style="height: 600px;">
                <div class="jspDrag" style="height: 300px; top: 0px;">
                <div class="jspDragTop"></div>
                <div class="jspDragBottom"></div>
                </div>
            </div>
            <div class="jspCap jspCapBottom"></div>
    </div>
    </div>
</div>
</div>

CSS -

#subpanel {
position: absolute;
z-index: 10;
}

.nav_dialog {
position: absolute;
font-family: 'Inconsolata',verdana;
display: none;
float: left;
background-color: rgba(255, 255, 255, 0.75) !important;
color: #111 !important;
padding: 10px;
z-index: 10;
width: 495px;
color: white;
min-height: 306px;
font-size: inherit;
line-height: inherit;
margin-top: 2px;

}
.nav_dialog .close_link {
text-align: right;
margin-bottom: 10px;
}
.nav_dialog .scrollpane {
overflow: auto;
min-height: 270px;
margin: 0px 8px 0px 15px;
padding-right: 65px;
width: 410px;
}

.jspContainer
{
overflow: auto;
position: relative;
}

.jspPane
{
position: absolute;
}

.jspVerticalBar
{
position: absolute;
top: 0;
right: 0;
width: 16px;
height: 100%;
background: red;
}

.jspHorizontalBar
{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 16px;
background: red;
}

.jspCap
{
display: none;
}

.jspHorizontalBar .jspCap
{
float: left;
}

.jspTrack
{
background: #dde;
position: relative;
}

.jspDrag
{
background: #bbd;
position: relative;
top: 0;
left: 0;
cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
float: left;
height: 100%;
}

.jspArrow
{
background: #50506d;
text-indent: -20000px;
display: block;
cursor: pointer;
padding: 0;
margin: 0;
}

.jspArrow.jspDisabled
{
cursor: default;
background: #80808d;
}

.jspVerticalBar .jspArrow
{
height: 16px;
}

.jspHorizontalBar .jspArrow
{
width: 16px;
float: left;
height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
outline: none;
}

.jspCorner
{
background: #eeeef4;
float: left;
height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
margin: 0 -3px 0 0;
}

Answer 1

让jscrollpane在javascript中生成类。另外，在文档中包含jscrollpane库。

<!-- Jscroll pane library -->
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<!-- Mousewheel -->
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>



<div id="subpanel" class="nav_dialog displayed" style="height: 560px; left: ; display: block;">
                <div class="close_link">
                    <a href="#" style="color: blue;">Close (x)</a>
                </div>
                <div class="scroll-pane">
                            <p><img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt="">
                            </p>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                            </p>
                            <p>
                                -
                            </p>
                            <p>
                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            </p>
                            <p>
                                &nbsp;
                            </p>
                            <p>
                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                            </p>
                            <p>
                                &nbsp;
                            </p>
                            <p>
                                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
                            </p>
                            <p>
                                -
                            </p>
                            <p>
                                Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
                            </p>
                </div>
            </div>

赋予元素.scroll-pane overflow：hidden和height：300px或所需的高度。

我创造了小提琴，所以你可以看到结果 http://jsfiddle.net/8zk4E/1/

jScrollpane滚动条无法正常工作

1 个答案: