フレックスレイアウトによるシームレスなスクロールのサンプルコード

この記事では、シームレスなスクロールを実現するためのフレックスレイアウトのサンプルコードを主に紹介します。サンプルコードは次のように共有されます。

ケースデモンストレーション

フレックスレイアウト

フレックス レイアウトと呼ばれるレイアウトは、伸縮性のあるボックス レイアウトです。このレイアウトはモバイル デバイスでよく使用されますが、ブラウザーのバージョンが更新されるにつれて、フレックス レイアウトは独自の利点によりますます一般的に使用されるようになっています。

アイデア:

• まず、この小さなデモの構造、上部構造と下部構造を分析してみましょう。コンテナを使用してこれをラップすることができます（いわゆるビッグボックス）。
• 上部にナビゲーションがあり、その上に ul があり、その下には幅 100% で高さをカスタマイズした 2 つの div を使用できます。
• 次に、特定の親ボックスを覚えて、モデルを開いてみます。 display:flex; の場合、上下にどのように分割すればよいでしょうか?続けてflex-wrap: wrap;と追加していくと、上と下が分離されます。便利じゃないですか？
• 次は下の部分です。ulはdivの中にネストされていて、ulの高さは分かりやすいのですが、divの高さなのでulの幅はどれくらいでしょうか？ 、無限に広くすることができます！ ！ ！ ulの幅を3000pxに設定します
• 次に、liを入れます。liにも上下の構造があることがわかりますので、笑！ li でも flex を有効にする必要がありますか? flex-wrap: wrap;上の div は img 用で、その下に a タグがあります。
• 覚えておいてください、私は浮くべきです!そして、そこにoverflow:hiddenを置くことを検討してください

アニメーション効果

• 5 つの画像があり、これを右から左に移動させます。では、ul に移動するように要求すると、li も移動するように促すことができますか?
• @keyframes を使用して ul の左側の値を変更しますが、ここで問題が発生します。5 枚の画像を配置して ul を移動すると、右側が消えて空白になります。何をするか？ ? ?
• 5里をコピーして後ろに貼ってもいいですか？ 答えはイエスです！ ！左側が li の最初のグループを削除すると、2 番目のグループは表示されなくなります。次に、アニメーションを使用します。20 秒間の線形無限実行、つまり無限ループです。

CSSパーツコード

* {
    マージン: 0;
    パディング: 0;
}

{
    テキスト装飾: なし;
}

.box-big {
    位置: 絶対;
    ディスプレイ: フレックス;
    左: 50%;
    上位: 50%;
    境界線: 1px 実線 #9FD6FF;
    変換: translate(-50%, -50%);
    幅: 707ピクセル;
    高さ: 170ピクセル;
    /* 背景色: ピンク; */
    flex-wrap: ラップ;
    オーバーフロー: 非表示;
}

.ボックストップ{
    幅: 707ピクセル;
    高さ: 30px;
    下境界線: 1px 実線 #9FD6FF;
    背景色: #FEFEFE;
}

.div-ボトム{
    幅: 707ピクセル;
    高さ: 136px;
    /* 背景色: darkgoldenrod; */
    オーバーフロー: 非表示;
}

.st-アイコン-android {
    表示: インラインブロック;
    幅: 15px;
    高さ: 15px;
    背景画像: url(../img/hd.gif);
    マージン: 8px;
}

h5 {
    位置: 絶対;
    上: 6PX;
    左: 30px;
    色: #307DD1;
}

ul {
    位置: 絶対;
    左: 90px;
    幅: 3000ピクセル;
    高さ: 100%;
    アニメーション: 20 秒間の線形無限実行。
}

li {
    リストスタイル: なし;
    フロート: 左;
    幅: 140ピクセル;
    高さ: 100%;
    マージン: 0 5px 0 5px;
    /* 背景色: ゴールド; */
    flex-wrap: ラップ;
}

。写真 {
    上マージン: 5px;
    幅: 140ピクセル;
    高さ: 105px;
    テキスト配置: 中央;
    /* 背景色: スプリンググリーン; */
}

ｐ {
    テキスト配置: 中央;
}

画像 {
    カーソル: ポインタ;
}

@keyframes 実行 {
    0% {
        左: 0;
    }
    100% {
        左: -745px;
    }
}

フレックスレイアウトでシームレススクロールを実装するサンプルコードに関するこの記事はこれで終了です。フレックスシームレススクロールの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。