欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

實(shí)現(xiàn)橫向滾動(dòng)條的2種方法示例

  發(fā)布時(shí)間:2018-07-06 17:16:01   作者:熱愛前端的17號(hào)誒   我要評(píng)論
橫向滾動(dòng)條怎么出來(lái)?很多人肯定以為是:overflow-x:scroll;當(dāng)然不是這么簡(jiǎn)單的,下面這篇文章主要給大家介紹了關(guān)于如何實(shí)現(xiàn)橫向滾動(dòng)條的2種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言:

在項(xiàng)目開發(fā)中,遇到了一個(gè)需求,實(shí)現(xiàn)一行上的導(dǎo)航欄過(guò)多使其產(chǎn)生橫向滾動(dòng)條。一開始做項(xiàng)目,給的時(shí)間太短又著急,覺得網(wǎng)上有現(xiàn)成的,去搜發(fā)現(xiàn)沒有,只好自己去寫,一開始用的是平常css+js實(shí)現(xiàn)功能,之后學(xué)習(xí)了flex布局,所以又想到了用flex實(shí)現(xiàn)橫向滾動(dòng)條。兩種方法,記錄下來(lái),供以后借鑒。

正文:

兩種方法各有各的好處,如果不考慮兼容性問(wèn)題,還是用flex吧,畢竟還是喜歡那一句話:Write Less,Do More。哈哈

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">會(huì)計(jì)</li>
        <li class="nav_item">繪畫</li>
        <li class="nav_item">Adobe</li>
        <li class="nav_item">微軟</li>
        <li class="nav_item">會(huì)計(jì)</li>
        <li class="nav_item">繪畫</li>
    </ul>
</div>
<script src="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: 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只是內(nèi)容的寬度,需要加上padding的寬度
})

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

對(duì)于white-space,item在沒有用white-space:nowrap時(shí),發(fā)現(xiàn)一個(gè)問(wèn)題,在未設(shè)定寬度的情況下,一個(gè)單詞不會(huì)換行,而漢字會(huì)換行,認(rèn)為是和display:flex有關(guān)系,上網(wǎng)查閱,才知道:white-space是看空格來(lái)識(shí)別是否換行的,單詞是作為一個(gè)字符,所以要針對(duì)于漢字和英文,都要設(shè)置white-space:nowrap不換行。因?yàn)闈h字和英文的不同,導(dǎo)致所占的寬度不一致,所以要留1到2個(gè)像素。

對(duì)應(yīng)的筆記和實(shí)例,我放到了GitHub,https://github.com/sqh17/notes  (本地下載) 如果想實(shí)踐可以去clone下來(lái)。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。

相關(guān)文章

最新評(píng)論