2013-06-27 1 views
-1

jscrollpane 관련 문제가 있습니다. 나는 약이 마크 업을 가진 필름 스타일의 축소판 탐색을 구축하고자 다음과 같이jscrollpane으로 화면 크기보다 큰 내용

<div class="thumbnails"> 
<ul class="scroll-pane horizontal-only"> 
<li><img></li> 
<li><img></li> 
</ul> 
<div> 

CSS의는 다음과 같습니다

.thumbnails { 
    background-color:#666; 
    height:70px; 
    position:fixed; 
     bottom:0; 
     left:0; 
    width:100%; 
} 

.thumbnails .scroll-pane { 
    height:70px; 
    width:100%; 
    overflow:auto; 
} 

.thumbnails .horizontal-only { 
    height:auto; 
    max-height:70px; 
} 

.thumbnails li { 
    display:block; 
    float:left; 
    height:70px; 
    width:49px; 
} 

는 내가 울 - 태그에 JScrollPane의 불렀다. 원하는 출력은 가로 스크롤만으로 브라우저 창의 아래쪽에 고정되는 축소판 탐색입니다. Li 요소가 브라우저 윈도우의 끝에서 중단되어 새로운 행에서 시작하는 것처럼 보이기 때문에 수직 스크롤 막대가있는 고정 위치 축소판 탐색이 결과입니다. 게다가 스크롤 할 수없는 가로 스크롤바가 생깁니다.

내 CSS 또는 jscrollpane에서 뭔가를 변경해야하는지 잘 모르겠습니다. 이것에 대한 의견이 있으면 만족합니다. 미리 감사드립니다!

+0

jsfiddle에서 코드를 보여주십시오. – chrisvillanueva

+0

http://jsfiddle.net/ynw2D/3/ 여기 있습니다. – zinky

답변

0

작동에 필요한 jScrollPane의 CSS가 포함되어 있습니까? 그들은 여기에서 찾아 낼 수있다 : http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css. http://jscrollpane.kelvinluck.com/basic.html

업데이트 : 당신이 CSS 규칙을 교체하는 경우 '바닥 : 0'과 '최고 : 0'당신이 .thumbnails를 들어 볼 수

그리고 여기 당신은 수평 및 수직 스크롤을 할 수있는 방법의 예입니다 너의 수평 바.

업데이트 2 :이 질문을보십시오 : Scrolling items in DIV horizontally instead of vertically? 세로 스크롤하는 법을 설명합니다 (jScrollPane 제외).

+0

답변 해 주셔서 감사합니다. scrollpane의 CSS를 포함 시켰습니다. jsfiddle에서 깜박했습니다. 이 예제를 알고 심지어 크롬 27에서 '가로 전용'예제에 가로 및 세로 스크롤 막대가 있습니다. 실제로 가로 스크롤 막대가 표시됩니다. 그러나 스크롤 할 수는 없습니다. 그리고 나는 원하지 않는 세로 스크롤바를 얻습니다. – zinky

+0

업데이트 된 답변보기 (버전 2). – bodrovis