jscrollpane大於屏幕大小的內容

-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; 
}

我呼籲UL標籤JScrollPane中。所需的輸出是一個縮略圖導航，它只固定在瀏覽器窗口的底部，僅進行水平滾動。我得到的結果是一個帶垂直滾動條的固定位置縮略圖導航，因爲Li元素似乎在瀏覽器窗口的末尾中斷，並在新行中開始。除此之外，我還得到了一個不可滾動的水平滾動條。

我不知道是否需要更改我的css或jscrollpane中的某些內容。我對此感到高興。提前致謝！

來源

2013-06-27 zinky

請在jsfiddle中顯示您的代碼。 – chrisvillanueva

http://jsfiddle.net/ynw2D/3/你走了。 – zinky

您是否包含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）。

來源

2013-06-27 11:17:50 bodrovis

感謝您的回答。我包含了scrollpane的css，我只是把它忘在jsfiddle中。我知道這個例子，甚至在Chrome 27中的「僅水平」示例中有一個水平和垂直滾動條。其實我看到水平滾動條。但它不可滾動。我得到一個垂直滾動條，我不想要。 – zinky

查看更新的答案（版本2）。 – bodrovis

jscrollpane大於屏幕大小的內容

回答

相關問題