如何实现横向滚动条

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

html：

<div class="nav_wrap">    <ul class="nav_mine">        <li class="nav_item">全部</li>        <li class="nav_item">Adobe</li>        <li class="nav_item">微软</li>        <li class="nav_item">会计</li>        <li class="nav_item">绘画</li>        <li class="nav_item">Adobe</li>        <li class="nav_item">微软</li>        <li class="nav_item">会计</li>        <li class="nav_item">绘画</li>    </ul></div><script src="node_modules/jQuery/tmp/jquery.js"></script>

一 原始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;}

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