如何在tinyscroll插件中使用水平滚动功能

how to use horizontal scroll feature in tinyscroll plugin

本文关键字：水平 滚动 功能 tinyscroll 插件      更新时间：2023-09-26

我使用的是http://baijs.com/tinyscrollbar/，文档中说，我们可以通过将x轴设置为低于来使用水平功能

 $(document).ready(function(){
               $("#scrollbar1").tinyscrollbar({ axis: "x"});
            });

但只有垂直方向对我有效，而不是水平方向。我想让它与水平滚动条和自定义宽度一起工作。

Fiddle：http://jsfiddle.net/874pzsvL/

您缺少水平的CSS。检查此链接并搜索#scrollbar2。在fiddle中，我替换了CSS，并将scrollbar1重命名为scrollbar2，因为它们的CSS针对的是水平样式的#scrollbar2。

/* scrollbar2 */
#scrollbar2
{
    width:251px;
    margin:0 0 10px;
}
#scrollbar2 .viewport
{
    width:236px;
    height:125px;
    overflow:hidden;
    position:relative;
}
#scrollbar2 .overview
{
    list-style:none;
    width:1416px;
    padding:0;
    margin:0;
    position:absolute;
    left:0;
    top:0;
}
#scrollbar2 .overview img
{
    float:left;
}
#scrollbar2 .scrollbar
{
    background:transparent url(../images/bg-scrollbar-track-x.png) no-repeat 0 0;
    position:relative;
    margin:0 0 5px;
    clear:both;
    height:15px;
}
#scrollbar2 .track
{
    background:transparent url(../images/bg-scrollbar-trackend-x.png) no-repeat 100% 0;
    width:100%;
    height:15px;
    position:relative;
}
#scrollbar2 .thumb
{
    background:transparent url(../images/bg-scrollbar-thumb-x.png) no-repeat 100% 50%;
    height:25px;
    cursor:pointer;
    overflow:hidden;
    position:absolute;
    left:0;
    top:-5px;
}
#scrollbar2 .thumb .end
{
    background:transparent url(../images/bg-scrollbar-thumb-x.png) no-repeat 0 50%;
    overflow:hidden;
    height:25px;
    width:5px;
}
#scrollbar2 .disable
{
    display:none;
}

Fiddle演示

相关文章：