今天就跟大家聊聊有關如何實現橫向滾動條，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

html：

<divclass="nav_wrap">
<ulclass="nav_mine">
<liclass="nav_item">全部</li>
<liclass="nav_item">Adobe</li>
<liclass="nav_item">微軟</li>
<liclass="nav_item">會計</li>
<liclass="nav_item">繪畫</li>
<liclass="nav_item">Adobe</li>
<liclass="nav_item">微軟</li>
<liclass="nav_item">會計</li>
<liclass="nav_item">繪畫</li>
</ul>
</div>
<scriptsrc="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:15px10px;
border-bottom:1pxsolid#aca9a7;
height:75px;
overflow-x:scroll;
overflow-y:hidden;
}

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

js代碼：

$(function(){
varwidth=0;
for(leti=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:15px20px;
border-bottom:1pxsolid#aca9a7;
height:75px;
display:flex;
align-items:center;
overflow-y:hidden;
flex-wrap:nowrap;
}

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

總結

以上是生活随笔為你收集整理的如何实现横向滚动条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。