[CSSチュートリアル]実装ステップの吸引上部と下部のH5レイアウトのための純粋なCSSソリューション

2022-01-27 20:47:18

の製品について何を言及すべきかを考える。

私は最近、正確には反復的な要件を作りました。ユーザーがマーケティングの変化をよりよく観察できるように、ヘッダーの概要（以下のようなもの）を追加し、物語の冒頭を静かにレイアウトしたのです。

以前は、このページはレビューの一覧（読み込み可能）だけで、一覧のヘッダーはデータを見やすくするために固定レイアウトになっていました。しかし、この概要を追加したとき、製品に言及されていなかったので、単純かつ残酷にこのリストのヘッダーを相対レイアウトに置き換えました、よし、テストに言及しよう。

しかし翌日、ドロップダウンに大量のデータが読み込まれていることがわかり、リストヘッダーがトップアップされた後、再びリストをスライドさせないと見れなくなってしまい、とても嫌な思いをしました。そこで同僚は、製品に問い合わせるか、オーバービュー＋オーバービューを固定にした方がいいのではと言いました。

最初に感じたのは、そのことを言うと製品から only フィルターリストのヘッダーを固定にし、onlyを記す。

すると、以下のようなダイアログが表示されます。

たしかに、恐れるものは手に入れることができる。でも、同僚が言ったように、涙を流しながらお願いするニーズは引き受けなければなりませんね。

コメントで言及された後、後から付箋の解答が追加されましたが、確かに最適解です。

部分天井

次のコードは、ページの dom 構造

<div id="demo" className={style.demo}>
  <h3 id="title" className="title">This is an overview header</h3>
  <div id="content" className="content">
    <div className="filter-bar">
      <h3>This is the list header</h3>
      <h3>filterable</h3>
      <h3>Here is the scrolling list</h3>
    </div>
    <ul className="list">
      {arr.map(({ key, label }) => <li key={key}>{label}</li>)}
    </ul>
  </div>
</div>

JSの実装

ページ自体にスクロールイベントのリスナーがあるので、最初はJSでやろうと思ったのですが、仕事終わりで金曜日ということもあり、5分では無理な気がして実行しました。

さて、JSで実装してみるために、まずは頭の中を整理する。

ページのスクロールを聞き、ul要素の上部がタイトルの高さより大きいとき、フィルタヘッドが吸着するようにCSSクラスを追加する。
ul要素の上端がタイトルの高さ以下になったら、追加したクラスを削除し、フィルターヘッダーをキャンセルします。

JSコード

useEffect(() => {
  const demo = document.querySelector('#demo');
  const content = document.querySelector('#content');
  const titleHeight = document.querySelector('#title').clientHeight;
  let fixed = false;
  demo.addEventListener('scroll', (e) => {
    // Add the ceiling
    if (!fixed && e.target.scrollTop >= titleHeight) {
      fixed = true;
      content.classList.add('with-fixed');
    }
    // Cancel the top-sucking
    if (fixed && e.target.scrollTop < titleHeight - 5) {
      content.classList.remove('with-fixed');
      fixed = false;
    }
  });
}, []);

それほど大変そうには見えませんが、本番までに最適化する余地がまだたくさんあるので、後で解析して追加する予定です。

CSSビューポートの実装

JSは単純に見えるかもしれませんが、よく言われる文章のように This sudden and tragic news added to the woes of an already poor family . このようなドロップロードがあるページでは、すでにリスナー内部で多くのロジックを実行しているので、CSSでできるのであれば、わざわざJSを使う必要はないでしょう。

まずは頭を整理して、製品の要件を深掘りしてみましょう。

フィルターヘッドを視界内（天井）に収め、フィルター性を確保する。
リストデータが多い場合、つまり概要ヘッダーを見る必要がない場合は、できるだけ多くのリストを表示する。
リストがプルアップで読み込まれること。

上記のアイデアを整理すると、リストが長いときに概要のヘッダーを隠すことが本当の目的であることがわかります。疑似コードで簡単に表現すると次のようになります（vhはビューポート単位で、100vhは画面全体の表示可能高さを表します）。

 if (titleHeight + filterBarHeight + listHeight > 100vh) {
     title.hide();
   }

また、ヘッダーが隠れていて、フィルタのヘッダーとリストがビューポートからすぐ外にあるような概観はどのように実現するのでしょうか？

filterBarHeight + listHeight = 100vh

ユーザーが上にスクロールするとき、コンテンツ（フィルターヘッダーとリスト）だけが正確に1ビューポート高さ（100vh）である必要があり、概要ヘッダーは正確に隠され、フィルターヘッダーは正確に上部吸収され、CSSで次のように実装されています。

// Not the full code, see the demo for details.
.demo {
 :global {
   .title {
     height: 15vh;
     line-height: 15vh;
     text-align: center;
     border-bottom: 1PX solid #eee;
     background-color: #fff;
   }
   .filter-bar {
     height: 15vw;
     background-color: #888;
     display: flex;
     align-items: center;
   }
   .list {
     max-height: calc(100vh - 15vw);; // important to set here
     overflow: scroll;
     background-color: rgba(127, 255, 212, .8);
   }

CSS Stickyの最適な実装

cssでの位置決め( position ) 属性値には一般的でないものがあります。 sticky があります。

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

要素は通常のドキュメントフローに従って配置され、次にtop, right, bottom, leftの値に基づいて、最も近いスクロール祖先と最も近いブロックレベル祖先（テーブル関連要素を含む）に対して相対的にオフセットされます。スティッキー配置は相対配置と固定配置を混ぜたようなものと考えることができます。要素は特定の閾値を越えるまで相対的に配置され、その後、固定的に配置されます。

ここでは、JS-aligned方式から、フィルターバーのpositionプロパティを変更するだけで、JSへの依存をなくすためにスティッキーポジショニングに変更しています。

.demo {
  max-height: 100%;
  overflow: scroll;
  .filter-bar {
    position: sticky;
    top: 0;
  }
}

デモクラスは、一番外側の dom()に作用します。 <div className={style.demo}> ) 100vhのそのビューの高さで、コンテンツがスクロールのための高さを超えている場合、フィルタバー要素は、スティッキー配置を使用して、デモ要素からの高さが0よりも大きい場合、それは通常のドキュメントフローの配置の形で、つまり、相対位置決めを使用して、高さが0未満または等しい場合、それは固定位置を使用して、それが天井の効果を実現します。

コントラスト

CSSはちょっと設定するだけで簡単にできそうな気がしませんか、コンテンツの高さがちょうど 100vh 少しの経験（ユン）の経験（チー）が必要で、しばしばH5を書き、粘着スキームも初心者が粘着することを信じる。実際には、簡単なだけでなく、JSよりも少なくとも2つの利点があります。

JSは、上記の場合、直接固定位置、良い視力にフィルタヘッドの位置を変更すると、実際には、リストを感じることができる瞬間を跳んでいる、つまり、リストが突然通常のドキュメントフローのうち、フィルタヘッドを埋めるためにフィルタバーの高さを移動します;（解決策は、フィルタヘッド外ドムの複数の層を設定すると、固定高さを与えるようにフィルタヘッドは、通常のドキュメントフローから、高さが残っています）。
ドム要素の再配置を操作するためにJSを使用する場合、毎年面接官は、私は確かにCSS実装よりも多くのパフォーマンスを消費し、より多くを言うことはありませんそれらの再描画リテイクと述べた。

もちろん、ビューポートの解決策もios携帯の互換性の問題があり、safariの頭と下の可視性がスライド時に変わるので、Barが見えると、実際の100vhは画面の可視高さより高く、それは上吸収の頭が見えなくなる原因となります。今のところ、ウェブ上ではいろいろ言われているものの height: -webkit-fill-available. しかし、100vhに依存する限り、このジレンマに直面し、サファリはとても奇妙で、次はIEです。

以上の分析の結果、IOS safariでの100vhの致命的な問題は、純粋なCSSの解決策として、この100vhをフェードアウトさせるだろう。しかし、PCページ、あるいは私のようにアプリの中で動く（つまりバーが存在しない）ページを書きたいのであれば、この解決策は有効です。すべての解決策は、シナリオを特定し、具体的に分析する必要があり、完璧なものは生まれてきません。ただ、ここで考え方を提起し、いくつかの洞察を深めるだけです。

そして、粘着シナリオは100vhに依存せず、100%で書き込み可能なので、そのような心配はなく、比較した場合の最適解は sticky しかし height: 100% は底なし沼で、htmlタグからコンテナ要素までスクロールしながら書く必要があります。

弾力性のある底面吸着

部分的な弾性吸着についてはもういいとして、一般的なものである選択的底吸着について説明します。ページコンテンツが100vh以下の場合、ページ内の各要素に Footer は底面吸収で、ページ内容が100vhより大きいときは Footer は通常のドキュメントの流れの中にあるため、コンテンツが少なすぎることによる美的影響を受けることなく、コンテンツの可視領域を大きくすることができます（図参照）。

<イグ

自分のサイトにはコンテンツが足りない時期なんてないと思い込んで、最初の画像のようなポジショニングをしない人は今でもたくさんいますが、以前は下部に固定配置するのが一般的でした。

柔軟なボトムセービング用途 min-height と絶対位置決めの組み合わせで、その実装はシンプルです。コアとなるコードは5行以下のCSSで構成されています。

body{
  position: relative;
  min-height: 100vh;
}

footer {
  width: 100%;
  position: absolute;
  bottom: 0;
}

原則は、コンテンツエリアの高さは最低でも1画面分あり、その後は画面に対して下を絶対的に配置し、コンテンツが多くなると、高さは100vhより大きくなり、それに依存するので bottom: 0; それで下をどんどん吸い上げていくのですが、ここからが厄介なんです。

このシナリオの場合 height: -webkit-fill-available が有効です。

吸引トップ吸引ボトムのステップのH5レイアウトを解決するための純粋なCSSソリューションに関するこの記事は、これに導入され、より関連するCSS吸引トップ吸引ボトムコンテンツは、スクリプトホーム以前の記事を検索するか、次の関連記事を閲覧し続け、私はあなたが将来的に多くのスクリプトホームをサポートすることを願っています！この記事では、吸引トップ吸引ボトムのステップのH5レイアウトは、このに導入されています。