首頁  >  文章  >  web前端  >  css實作橫向捲軸的兩種方式(程式碼實例)

css實作橫向捲軸的兩種方式(程式碼實例)

青灯夜游
青灯夜游原創
2018-09-11 17:53:288032瀏覽

本章為大家介紹用css實現橫向捲軸的兩種方式。有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

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 < $(&#39;.nav_item&#39;).length; i++) {
        width += $(&#39;.nav_item&#39;).eq(i).outerWidth(true);
    }
    $(&#39;.nav_mine&#39;).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個像素。

以上是css實作橫向捲軸的兩種方式(程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn