-1

我对 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-tag 上调用了 jscrollpane。所需的输出是缩略图导航，它固定在浏览器窗口的底部，只能水平滚动。我得到的结果是带有垂直滚动条的固定位置缩略图导航，因为 Li 元素似乎在浏览器窗口的末尾中断并从新行开始。除此之外，我得到一个不可滚动的水平滚动条。

我不知道是否需要在我的 css 或 jscrollpane 中更改某些内容。我很高兴对此有任何评论。提前致谢！

4

1 回答 1

0

您是否包含了运行所需的 jScrollPane 的 CSS？它们可以在这里找到：http: //jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css。

这是一个如何进行水平和垂直滚动的示例：http: //jscrollpane.kelvinluck.com/basic.html

更新：如果将 .thumbnails 的 CSS 规则 'bottom: 0' 替换为 'top:0'，您将看到单杠。

更新 2：看看这个问题：Scrolling items in DIV Horizo​​ntal 而不是垂直？它告诉如何进行垂直滚动（虽然没有 jScrollPane）。

于 2013-06-27T11:17:50.497 回答