css實作橫向捲軸的兩種方式（程式碼實例）-css教學-PHP中文網

css實作橫向捲軸的兩種方式（程式碼實例）

青灯夜游

發布： 2018-09-11 17:53:28

原創

8064 人瀏覽過

本章為大家介紹用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中文網其他相關文章！