H5レイアウト実装手順における天井と底部の吸引を解決するための純粋なCSS

どのような製品について言及したいですか?

最近、ユーザーがマーケティングの変化をよりよく観察できるように、ヘッダーの概要（下の図のようなもの）を追加するという要件、より正確には反復的な要件がありました。このようにして、物語の始まりが静かに予告されていました。

これまで、このページはレビューのリスト（プルアップして読み込む）のみでした。データを読みやすくするために、リストヘッダーは固定レイアウトを採用しました。ただし、この概要を追加したときに、製品側ではそのことが言及されていなかったため、列ヘッダーを単純に大まかに相対レイアウトに変更して、テスト用に提出しました。

しかし翌日、表示してみると、読み込むデータが多すぎることに気付きました。リストのヘッダーが押し上げられた後、再度フィルタリングしたい場合は、リストをもう一度上にスワイプして表示する必要がありました。この経験は非常に悪かったです。そこで同僚は、製品について質問するか、概要と概要を固定するかのどちらかにすることを提案しました。

私の最初の反応は、この質問をした後、製品はおそらくフィルターリストヘッダーを固定する只要求するだろうということでした。「のみ」という言葉に注意してください。

その後、次のような会話が行われました。

予想通り、あなたが恐れていることは何でも現実になります。しかし、同僚が言ったように、たとえ泣くことになったとしても、私はその要求を受け入れなければなりません。

コメントと提案を受け取った後、最適なソリューションであるスティッキーソリューションが追加されました。

部分天井

次のコードはページのdom構造です

<div id="demo" className={style.demo}>
  <h3 id="title" className="title">これは概要ヘッダーです</h3>
  <div id="コンテンツ" className="コンテンツ">
    <div className="フィルターバー">
      <h3>これはリストのヘッダーです</h3>
      <h3>フィルタ可能</h3>
      <h3>以下はスクロールリストです</h3>
    </div>
    <ul className="リスト">
      {arr.map(({ key, label }) => <li key={key}>{label}</li>)}
    </ul>
  </div>
</div>

JS実装

ページ自体にスクロールイベントリスナーがあるので、最初はJSで完結させようと思ったのですが、すでに仕事が終わっていたし金曜日だったので5分では終わらないと感じて逃げました。

では、まずアイデアを整理して、JS で実装してみましょう。

ページのスクロール状態を監視します。ul 要素の上部がページ上部からのタイトルの高さより大きい場合は、フィルターヘッダーを上部に固定する CSS クラスを追加します。
ul要素と上部の距離がタイトルの高さ以下の場合は、追加したクラスを削除し、ヘッド上部のフィルタリングを解除します。

JSコード

使用効果(() => {
  デモ = document.querySelector('#demo');
  定数コンテンツ = document.querySelector('#content');
  定数 titleHeight = document.querySelector('#title').clientHeight;
  固定 = false とします。
  デモ.addEventListener('スクロール', (e) => {
    // 天井を追加 if (!fixed && e.target.scrollTop >= titleHeight) {
      固定 = true;
      content.classList.add('with-fixed');
    }
    //天井をキャンセルif (fixed && e.target.scrollTop < titleHeight - 5) {
      content.classList.remove('with-fixed');
      固定 = false;
    }
  });
}, []);

難しくないように見えますが、実際には、コードをオンラインにする前に最適化する余地がまだたくさんあり、後で分析して補足する予定です。

CSS ビューポートの実装

JS は単純に見えますが、有名な文章のようなものです:這突如其來的噩耗，讓本不富裕的家庭雪上加霜。ドロップダウン読み込みのあるこのようなページでは、モニター内ですでに多くの論理処理が実行されているため、CSS で実装できる場合は JS に煩わされないようにしてください。

まず、考えを整理し、製品のニーズを深く掘り下げます。

スクリーニングを確実に行うために、スクリーニングヘッドを視界範囲内 (天井に取り付け) に保ちます。
リストデータが大量にある場合は、リストを可能な限り多く表示します。つまり、概要ヘッダーは必要ありません。
リストはプルアップすることで読み込まれます。

上記のアイデアを整理すると、リストが非常に長い場合、概要ヘッダーが非表示になることがわかります。これは、疑似コードで簡単に表現できます (vh はビューポートの単位、100vh は画面全体の視覚的な高さを表します)。

 if (タイトル高さ + フィルターバー高さ + リスト高さ > 100vh) {
     タイトルを非表示にする();
   }

では、フィルターヘッダーとリストをビューポートから除外したまま、概要ヘッダーを非表示にするにはどうすればよいでしょうか。

フィルターバーの高さ + リストの高さ = 100vh

ユーザーが上にスワイプし、コンテンツ (フィルターヘッダーとリスト) のみがちょうど 1 つのビューポートの高さ (100vh) になる必要がある場合、概要ヘッダーは非表示になり、フィルターヘッダーは上部と同じ高さになります。これは、次のような CSS を使用して実現されます。

// 完全なコードではありません。詳細についてはデモを参照してください:
.デモ{
 :グローバル{
   。タイトル {
     高さ: 15vh;
     行の高さ: 15vh;
     テキスト配置: 中央;
     下境界線: 1px 実線 #eee;
     背景色: #fff;
   }
   .フィルターバー{
     高さ：15vw;
     背景色: #888;
     ディスプレイ: フレックス;
     アイテムの位置を中央揃えにします。
   }
   .リスト{
     max-height: calc(100vh - 15vw);; // ここでの設定は非常に重要です overflow: scroll;
     背景色: rgba(127, 255, 212, .8);
   }

CSS Stickyのベスト実装

CSS にはあまり使用されないposition属性値sticky 」があります。

MDN 公式ドキュメントからの抜粋:

要素は通常のドキュメントフローに従って配置され、上、右、下、左の値に基づいて、最も近いスクロール祖先と最も近いブロックレベルの祖先 (テーブル関連要素を含む) に対してオフセットされます。スティッキーポジショニングは、相対ポジショニングと固定ポジショニングのハイブリッドと考えることができます。要素は、特定のしきい値を超えるまでは相対的に配置され、その後は固定されます。

ここでは、JS ソリューションに基づいていくつかの変更を行います。JS への依存を排除するには、filter-bar の配置プロパティを固定配置に変更するだけです。

.デモ{
  最大高さ: 100%;
  オーバーフロー: スクロール;
  .フィルターバー{
    位置: 固定;
    上: 0;
  }
}

デモクラスは、最も外側の DOM ( <div className={style.demo}> ) に作用し、視覚的な高さは 100vh です。コンテンツが高さを超えると、スクロールします。フィルターバー要素は固定配置を使用します。デモ要素からの高さが 0 より大きい場合は、相対配置、つまり通常のドキュメントフローの形式で配置します。高さが 0 以下の場合は、固定配置を使用して天井吸収の効果を実現します。

対比

CSS はとてもシンプルで、少し設定するだけでできると感じますか? ただし、コンテンツの高さが正確に100vhになるようにするには、ある程度の経験 (yun) が必要です。 H5 をよく書く人にとっては、スティッキーソリューションも初心者が遭遇するものだと思います。実際、シンプルなだけでなく、JS と比べて少なくとも 2 つの利点があります。

JS 上記のようにフィルターヘッダーの配置を固定配置に変更するだけで、視力の良い人はリストがジャンプする瞬間を実際に感じることができます。つまり、リストが突然フィルターバーの高さまで移動し、通常のドキュメントフローを離れてフィルターヘッダーを埋めます。(解決策は、フィルターヘッダーの外側に DOM のレイヤーを追加し、固定の高さを指定することです。これにより、フィルターヘッダーは通常のドキュメントフローから外れますが、高さはそのままになります)。
JS を使用して Dom 要素の並べ替えを操作する場合、毎年インタビュー担当者が話題にする再描画と再撮影についてはあまり言及しません。消費されるパフォーマンスは CSS 実装よりも確実に高くなります。

もちろん、ビューポートソリューションには iOS フォンとの互換性の問題もあります。Safari のヘッダーと下部の可視性はスライド時に変化するため、バーが表示されているときは、実際の 100vh が画面の表示可能な高さよりも高くなり、天井のヘッダーがブロックされることになります。今のところ、 height: -webkit-fill-available；についてはインターネット上で多くのコメントがありますが、このシナリオでは効果がありません。しかし、100vh に依存している限り、このジレンマに直面することになります。Safari は奇妙すぎるので、次の IE になるでしょう。

上記の分析の後、IOS Safari での 100vh の致命的な問題により、100vh のような純粋な CSS ソリューションは消え去るでしょう。しかし、PC ページの場合、またはあなたや私のように、書きたいページが APP で実行されている場合 (つまり、バーがない場合)、このソリューションは実行可能です。すべての計画には特定のシナリオと分析が必要です。完璧な人間など生まれつきいません。これは単にあなたの考え方を改善し、視野を広げるためです。

スティッキーソリューションは 100vh に依存せず、100% で記述できるため、そのような心配はありません。したがって、比較すると、最適なソリューションはstickyです。ただし、 height: 100%は底なしの穴であり、html タグから始めて、スクロールしながらコンテナー要素まで記述する必要があります。

伸縮性のある底

部分的な弾性天井吸収について説明した後、一般的な選択的底部吸収について説明します。ページコンテンツが 100vh 未満の場合は、 Footerが底部吸収されることを期待します。ページコンテンツが 100vh を超える場合は、 Footer通常のドキュメントフローになり、図に示すように、コンテンツが少なすぎるために外観に影響を与えることなく、コンテンツの表示領域が大きくなります。

自分のウェブサイトのコンテンツが不足することは絶対にないと固く信じているため、最初の画像のような配置を使用しない人がまだ多くいますが、以前は下部に固定配置を使用するのがより一般的でした。

弾性ボトムはmin-heightと絶対位置を使用しており、実装が非常に簡単です。コアコードは CSS の 5 行を超えません。

体{
  位置: 相対的;
  最小高さ: 100vh;
}

フッター {
  幅: 100%;
  位置: 絶対;
  下部: 0;
}

原則としては、コンテンツ領域の最小の高さは 1 画面であり、下部は画面に対して絶対的に配置されます。コンテンツが増えると、高さは 100vh を超え、 bottom: 0;に依存するため、常に下部を吸収します。これが巧妙な点です。

このシナリオでは、 height: -webkit-fill-available有効です。

これで、H5 レイアウトの天井と底部の吸引の問題に対する純粋な CSS ソリューションを実装する手順に関するこの記事は終了です。CSS 天井と底部の吸引に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<: Webフロントエンドベクターアイコンの使い方

>>: Docker-compose インストール yml ファイルの設定方法