jScrollpane 스크롤 막대가 작동하지 않습니다.

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의하자. 또한 문서에 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 오버플로 : 숨김 및 높이 : 300px 또는 원하는 높이를 지정합니다.

나는 그래서 당신은 http://jsfiddle.net/8zk4E/1/