Question

我有关于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中更改某些内容。我对此有何评论感到高兴。提前谢谢！

Answer 1

您是否包含了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 horizontally instead of vertically?它告诉我们如何进行垂直滚动（尽管没有jScrollPane）。

使用jscrollpane大于屏幕大小的内容

1 个答案: