CSS で水平スクロールバーを実装する 2 つの方法 (コード例)-CSSチュートリアル-php.cn

CSS で水平スクロールバーを実装する 2 つの方法 (コード例)

青灯夜游

リリース： 2018-09-11 17:53:28

オリジナル

8065 人が閲覧しました

この章では、CSS を使用して水平スクロールバーを実装する 2 つの方法を紹介します。困っている友人は参考にしていただければ幸いです。

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>

ログイン後にコピー

1. 水平スクロールバーを実装するためのオリジナル 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 を使用するのでしょうか? タブの数がわからないため、幅をハードコーディングすることができず、タブの幅を動的に取得してから合計を取得することしかできません。幅広い用途に便利な幅です。 externalWidth とパラメータ true は、パディング+マージン+ボーダーを含む幅を表します。

二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:nowrapを使用していない場合、幅が設定されていない場合に問題が見つかります。折り返されませんが、中国語の文字は折り返されます。これはdisplay:flexに関連していると思いました。後で調べたところ、空白は単語を1つの文字として扱うかどうかを識別するために使用されます。したがって、中国語の文字と英語には使用する必要があります。white-space:nowrap を折り返さないように設定する必要があります。中国語と英語の文字の違いにより幅が不均一になるため、1 ～ 2 ピクセルを残す必要があります。

以上がCSS で水平スクロールバーを実装する 2 つの方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。