兩種方式實現橫向滾動條

熱愛前端的17號誒發表於2018-07-02

　　前言：

　　在專案開發中，遇到了一個需求，實現一行上的導航欄過多使其產生橫向滾動條。一開始做專案，給的時間太短又著急，覺得網上有現成的，去搜發現沒有，只好自己去寫，一開始用的是平常css+js實現功能，之後學習了flex佈局，所以又想到了用flex實現橫向滾動條。兩種方法，記錄下來，供以後借鑑。

　　正文： 

　　兩種方法各有各的好處，如果不考慮相容性問題，還是用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">會計</li>
        <li class="nav_item">繪畫</li>
        <li class="nav_item">Adobe</li>
        <li class="nav_item">微軟</li>
        <li class="nav_item">會計</li>
        <li class="nav_item">繪畫</li>
    </ul>
</div>
<script src="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: 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只是內容的寬度，需要加上padding的寬度
})

  　　PS：為什麼用js，是因為不知道tabs有多少個，不能把寬度寫死，只能動態獲取tabs的寬度，然後相加，獲取總寬度，方便多次使用。outerWidth加上引數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;
}

　　

　　對於white-space，item在沒有用white-space:nowrap時，發現一個問題，在未設定寬度的情況下，一個單詞不會換行，而漢字會換行，認為是和display:flex有關係，上網查閱，才知道：white-space是看空格來識別是否換行的，單詞是作為一個字元，所以要針對於漢字和英文，都要設定white-space:nowrap不換行。因為漢字和英文的不同，導致所佔的寬度不一致，所以要留1到2個畫素。

 

　　對應的筆記和例項，我放到了GitHub，https://github.com/sqh17/notes  如果想實踐可以去clone下來。

　　有什麼問題請私信或留下評論，一起加油。

相關文章