189 8069 5689

如何实现横向滚动条-创新互联

今天就跟大家聊聊有关如何实现横向滚动条，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

公司主营业务：成都网站制作、网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出城东免费做网站回馈大家。

html：



    
        全部
        Adobe
        微软
        会计
        绘画
        Adobe
        微软
        会计
        绘画
    

一 原始css + jquery 实现横向滚动条（原生js可以实现，为了方便才用的jQuery）

css：

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}
.nav_wrap{
    overflow-x: scroll;
}
.nav_mine {
    padding: 15px 10px;
    border-bottom: 1px solid #aca9a7;
    height: 75px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.nav_mine .nav_item {
    border: 1px solid #1a110b;
    border-radius: 40px;
    color: #aca9a7;
    margin-right: 10px;
    font-size: 24px;
    padding: 4px 18px;
    float: left;
    list-style: none;
}

js代码：

$(function(){
    var width = 0;
    for (let i = 0; i < $('.nav_item').length; i++) {
        width += $('.nav_item').eq(i).outerWidth(true);
    }
    $('.nav_mine').width(width+20);  //width只是内容的宽度，需要加上padding的宽度
})

PS：为什么用js，是因为不知道tabs有多少个，不能把宽度写死，只能动态获取tabs的宽度，然后相加，获取总宽度，方便多次使用。outerWidth加上参数true，代表包含了padding+margin+border的宽度。

二 css3  --  flex

css:

* {
    box-sizing: border-box;
}

.nav_mine {
    padding: 15px 20px;
    border-bottom: 1px solid #aca9a7;
    height: 75px;
    display: flex;
    align-items: center;
    overflow-y: hidden;
    flex-wrap: nowrap;
}

.nav_mine .nav_item {
    border: 1px solid #aca9a7;
    border-radius: 40px;
    color: #aca9a7;
    margin-right: 22px;
    font-size: 24px;
    padding: 4px 18px;
    list-style: none;
    white-space: nowrap;
}

看完上述内容，你们对如何实现横向滚动条有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。


分享名称：如何实现横向滚动条-创新互联
标题来源：http://cdxtjz.cn/article/diegci.html

其他资讯