CSS スティッキー配置位置の詳細な説明: スティッキー問題の落とし穴

前書き: position:sticky は CSS ポジショニングの新しい属性です。相対ポジショニングと固定ポジショニングの組み合わせと言えます。主にスクロール イベントを監視するために使用されます。簡単に言えば、スライド プロセス中に、要素とその親要素間の距離が固定ポジショニングの要件 (top: 100px など) に達した場合、このときの position:sticky の効果は固定ポジショニングと同等であり、適切な位置に固定されます。

使用：

#スティッキーナビゲーション{
位置: 固定;
上: 100px;
}

位置を固定に設定し、同時に（上、下、右、左）のいずれかを指定します

使用条件:

1. 親要素には、overflow:hidden 属性または overflow:auto 属性を指定できません。

2. 上、下、左、右のいずれかの値を指定する必要があります。そうでない場合は相対的な位置になります。

3. 親要素の高さは固定要素の高さより低くすることはできない

4. スティッキー要素は親要素内でのみ有効です

例: CSS コード:

* {
            マージン: 0;
            パディング: 0
        }
        
        html 本文 {
            高さ：100vh;
            幅: 100%
        }
        
        h1 {
            高さ: 200px;
            位置: 相対的;
            背景色: 水色;
        }
        
        h1:後{
            コンテンツ： '';
            位置: 絶対;
            上: 100px;
            左: 0;
            幅: 100%;
            高さ: 2px;
            背景色: 赤;
        }
        
        #スティッキーナビゲーション{
            位置: 固定;
            /*位置: 絶対;*
            左: 0;*/
            上: 100px;
            幅: 100%;
            高さ: 80px;
            背景色: 黄緑;
        }
        
        .スクロールコンテナ{
            高さ: 600px;
            幅: 100%;
            背景色: ライトグレー;
        }

HTMLコード:

<h1>高さ 200 ピクセル、上から 100 ピクセル</h1>
    <div id="sticky-nav">これはタブ切り替えバーです。スティッキーを top=100px に配置します</div>
    <p class="scroll-container">スクロールが発生します</p>
    <p class="scroll-container" style="background:lightgoldenrodyellow;">スクロールが発生します</p>

プロジェクトで遭遇した落とし穴:

まず、各カーネルの position:sticky のサポートについて見てみましょう。

問題の説明:

小規模なプログラム開発プロジェクトでは、タブ コンポーネントはタブ バーの切り替えを含む固定配置を使用します。タブ バーの下部には、大きなリストのリスト コンテナー コンテンツが表示されます。表示されるコンテンツにはクリック イベント (またはタッチ イベント) があります。iOS および PC ブラウザーでのクリック テストは正常ですが、Android フォンでは正常ではありません。 ！ ！ ！なんと、クリックが完了しました！ ！また、リスト コンテナー内の項目のクリック ジャンプを削除しようとしたところ、タブ スイッチのクリックに応答がなく、イベントが消えてしまいました。 ！ ！

ブレークポイントを設定して、イベント フローの方向を表示します。まず、イベント キャプチャ --> ターゲット ノード タブ --> イベント バブリング。このバブルは、実際にコンテナー リスト内の項目に到達します。 。 。悪夢です。大まかに言うと、プロジェクトの構造は次のとおりです。

HTML構造:

<div class="service-wrap">
        <tab>これはタブスイッチです</tab>
        <div class="リストコンテナ">
            <!--for ループには多くの項目があります-->
            <アイテム></アイテム>
            <アイテム></アイテム>
        </div>
    </div>

解決：

1. コンポーネントライブラリのタブを使用する場合は、クリックの侵入や異常なイベントフローを防ぐために、外側のレイヤーにdivを配置するか（ビジネスシナリオに応じて一時的な解決策）

2. コンポーネントライブラリのスタイルは変更できません。タブコンポーネントのインラインスタイルとして Sticky を使用します。このタブをビューポイントの一番上に直接使用するため、この効果は固定で実現できます。呼び出しクラスの外部で position:fixed !import を設定しました。このスタイルは、コンポーネント ライブラリ内の配置スタイルをオーバーライドする最高の優先順位を持ち、すべて正常に動作します。

いくつかの考え:

position:sticky と Android の互換性は、単純に悲痛です。現在、携帯電話のユーザーが多く、両方を考慮する必要があります。Android システムは sticky ポジショニングをサポートしていないため、ビジネス シナリオが他のポジショニングで解決できる場合は、sticky を使用しない方がよいでしょう。 。 。 。悲しい涙を残して。 。 。 。

追伸: 他に解決策がありましたら、ぜひ教えてください。よろしくお願いします。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。