今天就跟大家聊聊有關(guān)如何實(shí)現(xiàn)橫向滾動(dòng)條，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

html：

<divclass="nav_wrap">
<ulclass="nav_mine">
<liclass="nav_item">全部</li>
<liclass="nav_item">Adobe</li>
<liclass="nav_item">微軟</li>
<liclass="nav_item">會(huì)計(jì)</li>
<liclass="nav_item">繪畫(huà)</li>
<liclass="nav_item">Adobe</li>
<liclass="nav_item">微軟</li>
<liclass="nav_item">會(huì)計(jì)</li>
<liclass="nav_item">繪畫(huà)</li>
</ul>
</div>
<scriptsrc="node_modules/jQuery/tmp/jquery.js"></script>

一 原始css + jquery 實(shí)現(xiàn)橫向滾動(dòng)條（原生js可以實(shí)現(xiàn)，為了方便才用的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只是內(nèi)容的寬度，需要加上padding的寬度
})

PS：為什么用js，是因?yàn)椴恢纓abs有多少個(gè)，不能把寬度寫(xiě)死，只能動(dòng)態(tài)獲取tabs的寬度，然后相加，獲取總寬度，方便多次使用。outerWidth加上參數(shù)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;
}

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。