亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

兩種方式實(shí)現(xiàn)橫向滾動(dòng)條

番茄西紅柿 / 909人閱讀

摘要：前言在項(xiàng)目開(kāi)發(fā)中，遇到了一個(gè)需求，實(shí)現(xiàn)一行上的導(dǎo)航欄過(guò)多使其產(chǎn)生橫向滾動(dòng)條。因?yàn)闈h字和英文的不同，導(dǎo)致所占的寬度不一致，所以要留到個(gè)像素。

　　前言：

　　在項(xiàng)目開(kāi)發(fā)中，遇到了一個(gè)需求，實(shí)現(xiàn)一行上的導(dǎo)航欄過(guò)多使其產(chǎn)生橫向滾動(dòng)條。一開(kāi)始做項(xiàng)目，給的時(shí)間太短又著急，覺(jué)得網(wǎng)上有現(xiàn)成的，去搜發(fā)現(xiàn)沒(méi)有，只好自己去寫(xiě)，一開(kāi)始用的是平常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">Adobeli>
        <li class="nav_item">微軟li>
        <li class="nav_item">會(huì)計(jì)li>
        <li class="nav_item">繪畫(huà)li>
        <li class="nav_item">Adobeli>
        <li class="nav_item">微軟li>
        <li class="nav_item">會(huì)計(jì)li>
        <li class="nav_item">繪畫(huà)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è)，不能把寬度寫(xiě)死，只能動(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在沒(méi)有用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)。

　　有什么問(wèn)題請(qǐng)私信或留下評(píng)論，一起加油。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/2054.html

相關(guān)文章

  • 今天，你的瀏覽器 “滾動(dòng)” 了嗎？

    摘要：今天，你的瀏覽器滾動(dòng)了嗎序在頁(yè)面中，一個(gè)有高度或者寬度的容器是最常見(jiàn)的構(gòu)成元素，而在其中的子元素有很大的概率超過(guò)父容器的尺寸限制，我們稱之為溢出。 今天，你的瀏覽器 滾動(dòng) 了嗎？ 序 在 Web 頁(yè)面中，一個(gè)有高度或者寬度的容器是最常見(jiàn)的構(gòu)成元素，而在其中的子元素有很大的概率超過(guò)父容器的尺寸限制，我們稱之為溢出。而應(yīng)對(duì)溢出，隱藏或者滾動(dòng)是最常見(jiàn)的處理方式。滾動(dòng)，作為 FEers 最經(jīng)常...

    leo108 評(píng)論0 收藏0

  • 今天，你的瀏覽器 “滾動(dòng)” 了嗎？

    摘要：今天，你的瀏覽器滾動(dòng)了嗎序在頁(yè)面中，一個(gè)有高度或者寬度的容器是最常見(jiàn)的構(gòu)成元素，而在其中的子元素有很大的概率超過(guò)父容器的尺寸限制，我們稱之為溢出。 今天，你的瀏覽器 滾動(dòng) 了嗎？ 序 在 Web 頁(yè)面中，一個(gè)有高度或者寬度的容器是最常見(jiàn)的構(gòu)成元素，而在其中的子元素有很大的概率超過(guò)父容器的尺寸限制，我們稱之為溢出。而應(yīng)對(duì)溢出，隱藏或者滾動(dòng)是最常見(jiàn)的處理方式。滾動(dòng)，作為 FEers 最經(jīng)常...

    ad6623 評(píng)論0 收藏0

  • 微信小程序scroll-view橫向滾動(dòng)的實(shí)踐踩坑及隱藏其滾動(dòng)條的實(shí)現(xiàn)

    摘要：此時(shí)正確姿勢(shì)如下變成這樣子不讓它換行到這里，就基本如我所愿了，大概長(zhǎng)這樣二隱藏滾動(dòng)條在網(wǎng)上搜了很多，都是說(shuō)加上這段代碼就可以隱藏滾動(dòng)條或者有的人說(shuō)這樣子隱藏滾動(dòng)條然而兩種方法我都試過(guò)，的滾動(dòng)條依然存在。。 一、實(shí)踐踩坑 項(xiàng)目使用mpvue開(kāi)發(fā) 1. scroll-view默認(rèn)是不滾動(dòng)的。。所以要先設(shè)置scroll-x=true或者scroll-y=true showImg(https...

    wemall 評(píng)論0 收藏0

  • vueTable大數(shù)據(jù)展示優(yōu)化

    摘要：懶加載方式常見(jiàn)的有淘寶一屏用元素占據(jù)一定的高度，然后再去拉圖片數(shù)據(jù)。但這種方式還是需要元素占位，淘寶一頁(yè)的數(shù)據(jù)量其實(shí)不算大，因?yàn)樗Y(jié)合了分頁(yè)。 背景 showImg(https://segmentfault.com/img/bVbhSVh?w=1606&h=440);大數(shù)據(jù)項(xiàng)目根據(jù)用戶輸入代碼查詢數(shù)據(jù)，用戶的代碼不可控（比如select from db limit 5000），有可能...

    JasinYip 評(píng)論0 收藏0

  • 解決div出現(xiàn)橫向滾動(dòng)條，背景色沒(méi)鋪滿問(wèn)題

    摘要：如圖，初始情況，點(diǎn)擊菜單后出現(xiàn)的文字長(zhǎng)度超出原寬度，出現(xiàn)了滾動(dòng)條注意設(shè)置才會(huì)出現(xiàn)滾動(dòng)條，如果設(shè)成超出的文字會(huì)被隱藏，向右拉滾動(dòng)條發(fā)現(xiàn)背景沒(méi)鋪滿解決方式給最外層加樣式說(shuō)明注意是而不是，不然會(huì)出現(xiàn)其它錯(cuò)誤。 問(wèn)題描述（如圖）：div等塊級(jí)元素默認(rèn)寬度為100%，當(dāng)頁(yè)面渲染完后其寬度已經(jīng)固定，這時(shí)候如果文字超出其寬度（如調(diào)用api后顯示的結(jié)果），我們?nèi)绻Ｍ涑霈F(xiàn)滾動(dòng)條，這時(shí)超過(guò)原寬度的部分...

    XBaron 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<