ページスクロールバー表示時のページジャンプを防ぐCSS設計方法_html/css_WEB-ITnose

1. 水平方向の中央揃えレイアウトとスクロール バーのジャンプに関する千年問題

現在の Web 時代では、ページ間のレイアウトのほとんどは水平方向の中央揃えレイアウトであり、本体に幅が設定され、次にマージンが設定されています。 0 オートリズム~

たとえば、淘宝網のホームページ:

しかし、このレイアウトにはユーザーエクスペリエンスに影響を与える隠れた危険性があります。最新のブラウザのデフォルトのスクロール バーは overflow:auto タイプであることを誰もが知っているはずです。つまり、サイズが 1 画面未満の場合はスクロール バーは表示されず、サイズを超えるとスクロール バーが表示されます。そこで、次のような質問があります:

Sina Weibo などの情報フロー ページは、上から下にプッシュ レンダリングされます。最初はヘッダー内の一部の情報のみが読み込まれ、ページの高さは制限されており、スクロール バーは表示されません。その後、利用可能な幅を占めるスクロール バーが表示され、マージンが 0 になります。 . main 要素は当然オフセットされ、ジャンプされます。
JSインタラクション、元々デフォルトのページの高さは1画面未満だったのですが、「さらに読み込む」をクリックすると内容が1画面を超え、スクロールバーが表示され、メインページが左に飛んでしまいました。
この構造は、ヘッダーの水平ナビゲーションによって更新および切り替えられるいくつかのページに似ています。その結果、一部のページにはスクロール バーがあり、一部のページにはスクロール バーがありません。その結果、ナビが飛び跳ねてしまいます。

現在、このエクスペリエンスの問題を最適化するには 2 つの解決策があります:

Sina Weibo など、高さとサイズが不確かな場合は、次を使用します:

CSS コードを使用してコンテンツをクリップボードにコピー

body { overflow-y: scroll; }  

タオバオのホームページなど、決定性が高い。 CSS を使用してページ サイズ レイアウトのスケルトンを設定し、その中にデータを吐き出します。したがって、スクロール バーが存在しないか、スクロール バーが直接表示されます。跳ね返りはありません。
ただし、後者の戦略は、一部の特別で高度にカスタマイズされたページにのみ適しています。 Zhihu のような、高さがコンテンツに依存するページは明らかに管理不可能であり、ページの高さが小さい場合、最初のメソッドの overflow-y:scroll は依然として醜い灰色のスクロール バーを保持すると言いましたが、これは実際には元に戻ります。 IEが権力を握っていた古い社会の時代へ。最新のブラウザーによって行われるデフォルトの視覚的な最適化は無駄ではないでしょうか? そう考えると悲しいことになります。
2. CSS3 は、スクロール バーが表示されたときにページがジャンプしないことを巧みに認識するために calc および vw 単位を計算します

1 行のコードで完了します:

CSS コードはコンテンツをクリップボード

.wrap-outer {       margin-left: calc(100vw - 100%);   }  

または:

CSS コード コンテンツをクリップボードにコピーします

.wrap-outer {       padding-left: calc(100vw - 100%);   }  

それなら、爆竹を鳴らしてお祝いしましょう! ！

まず、 .wrap-outer は、中央に配置された固定幅のボディの親を参照します。そうでない場合は、親を作成します (ボディを使用しても同様の効果を実現できますが、幅分離の原則に基づいて推奨されません)。 );
その後、 calc は CSS3 での計算は IE10 以降のブラウザでサポートされ、基本的に IE9 ブラウザでサポートされます (background-position には使用できません)
最後に、100vw はブラウザの window.innerWidth に対する相対的なブラウザの内部幅です。スクロールバーの幅もカウントされることに注意してください。 100% が利用可能な幅、つまりスクロール バーを除いた幅です。
つまり、calc(100vw - 100%) はブラウザのスクロール バーの幅です (スクロール バーがある場合は 0、スクロール バーがない場合は 0)。左右のスクロール バーの幅がある場合 (または両方が 0 の場合)、メイン コンテンツをジャンプすることなく常にブラウザーの中央に配置できます。

ここをクリックできます (IE10+): ページにスクロール バーが表示されてもデモはジャンプしません

デモ ページでは、タイトルと下の女の子がすべて中央に配置されます。このうち、女の子はこの記事で説明した「ジャンプせずにスクロールする」処理をしましたが、タイトルはジャンプしませんでした。その結果、スクロールバーが表示されるかどうかでタイトルの文字がジャンプしますが、女の子はそのままであることがわかります。女神のように動かない:

互換性
サポート: IE9+ およびその他の最新ブラウザ。

狭い画面幅での処理
上記の CSS にはまだ少し欠陥があります。ブラウザの幅が比較的小さい場合、右側より左側の空白が明らかに多くなり、少しばかげているように見えるかもしれません。この時点で、いくつかのレスポンシブ処理を行った方が良いかもしれません:

CSS コード コンテンツをクリップボードにコピー

@media screen and (min-width: 1150px) {      .wrap-outer {          margin-left: calc(100vw - 100%);      }   }