水平スクロールバーを実装する2つの方法の例

序文：

プロジェクトの開発中に、1 行にナビゲーションバーが多すぎる場合に水平スクロールバーを実装する必要があるという問題が発生しました。プロジェクトに取り組み始めたとき、与えられた時間が短すぎて急いでいました。インターネット上に既製のものがあると思っていましたが、検索しても見つからなかったので、自分で書かなければなりませんでした。最初は、通常の CSS + JS を使用して機能を実装しました。その後、フレックスレイアウトを学んだので、フレックスを使用して水平スクロールバーを実装することを思いつきました。これら 2 つの方法は、将来の参照用に記録されます。

文章：

どちらの方法にもそれぞれ利点があります。互換性の問題を考慮しない場合は、flex を使用する必要があります。結局のところ、私は「Write Less, Do More」という言葉が好きです。ハハハ

html:

<div class="nav_wrap">
    <ul class="nav_mine">
        <li class="nav_item">すべて</li>
        <li class="nav_item">アドビ</li>
        <li class="nav_item">マイクロソフト</li>
        <li class="nav_item">会計</li>
        <li class="nav_item">絵画</li>
        <li class="nav_item">アドビ</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 が使用されます)

CS: ...

* {
    ボックスのサイズ: 境界線ボックス;
    マージン: 0;
    パディング: 0
}
.nav_wrap{
    オーバーフローx: スクロール;
}
.nav_mine {
    パディング: 15px 10px;
    下境界線: 1px 実線 #aca9a7;
    高さ: 75px;
    オーバーフローx: スクロール;
    オーバーフロー-y: 非表示;
}

.nav_mine .nav_item {
    境界線: 1px実線 #1a110b;
    境界線の半径: 40px;
    色: #aca9a7;
    右マージン: 10px;
    フォントサイズ: 24px;
    パディング: 4px 18px;
    フロート: 左;
    リストスタイル: なし;
}

jsコード:

$(関数(){
    var 幅 = 0;
    (i = 0 とします; i < $('.nav_item').length; i++) {
        幅 += $('.nav_item').eq(i).outerWidth(true);
    }
    $('.nav_mine').width(width+20); //幅はコンテンツの幅のみで、パディングの幅を追加する必要があります})

PS: js が使用される理由は、タブの数がわからないため、幅をハードコードできないためです。タブの幅を動的に取得し、それらを合計して合計幅を取得することしかできず、複数使用に便利です。 outerWidth とパラメータ true を組み合わせると、幅にパディング + マージン + 境界線が含まれることを意味します。

2. CSS3 -- フレックス

css:

* {
    ボックスのサイズ: 境界線ボックス;
}

.nav_mine {
    パディング: 15px 20px;
    下境界線: 1px 実線 #aca9a7;
    高さ: 75px;
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    オーバーフロー-y: 非表示;
    flex-wrap: nowrap;
}

.nav_mine .nav_item {
    境界線: 1px 実線 #aca9a7;
    境界線の半径: 40px;
    色: #aca9a7;
    右マージン: 22px;
    フォントサイズ: 24px;
    パディング: 4px 18px;
    リストスタイル: なし;
    空白: ラップなし;
}

white-space については、item が white-space:nowrap を使用しない場合、問題が見つかりました。幅が設定されていない場合、単語は折り返されませんが、中国語の文字は折り返されます。これは display:flex に関連していると思いました。オンラインで調べたところ、white-space はスペースを見て折り返すかどうかを識別し、単語を文字と見なすことがわかりました。したがって、中国語の文字と英語の両方で、行の折り返しを防ぐために white-space:nowrap を設定する必要があります。漢字と英語の文字は異なるため、占める幅が一定ではないため、1～2 ピクセルを確保する必要があります。

対応するメモと例を GitHub の https://github.com/sqh17/notes (ローカルダウンロード) に置きました。練習したい場合は、クローンすることができます。

要約する

上記はこの記事の全内容です。この記事の内容が皆さんの勉強や仕事に一定の参考学習価値を持つことを願っています。ご質問があれば、メッセージを残してコミュニケーションしてください。123WORDPRESS.COM を応援していただきありがとうございます。

<<: WeChat 8.0の爆発的な特殊効果を実現するために300行以上のCSSコードが必要

>>: HTMLエリアタグの詳しい説明