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

溧陽(yáng)ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書合作）期待與您的合作！

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;
}

看完上述內(nèi)容，你們對(duì)如何實(shí)現(xiàn)橫向滾動(dòng)條有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

分享標(biāo)題：如何實(shí)現(xiàn)橫向滾動(dòng)條
網(wǎng)站路徑：http://aaarwkj.com/article6/gpjeog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、App設(shè)計(jì)、、小程序開發(fā)、網(wǎng)站導(dǎo)航、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)