スクロールバーがスペースを占有することで発生するバグを修正しました

背景

このバグは滾動條占據空間ことで発生していました。いくつかの情報を確認して、ようやく解決しました。ちなみに、このプロパティを調べて要約を作成し、皆さんと共有しました。

文章

昨日、テスターから問題が報告されました。聚焦提示偏了現象です。以下のように修正します。

最初は赤いボックスの位置が間違っていると思ったので、コードを探しました。

<入力
  // ...
  onFocus={() => setFocusedInputName('guidePrice')}
  onBlur={() => setFocusedInputName('')}
/>

<表
  データフォーカス列={focusedInputName}
  // ...
/>

コードに問題はなく、手動で設定されておらず、私、別の同僚、および PM の PC で正常に動作します。

当初の判断では、赤枠の位置決済に差があり、その差は17pxほどですが、この差はどのようにして生じたのでしょうか？

テスターの PC に行って、細かい点に気づきました。私の PC では、スクロールバーが停止していました。

彼の PC では、スクロールバーがスペースを占有しています。

彼は自分のコンピューター上で、元のoverscroll-y: scroll overscroll-y: overlay問題は解決しました。

したがって、滾動條占據空間ことがバグの原因であると判断されます。

オーバースクロール-y: オーバーレイ

overflow CSS プロパティは、要素のコンテンツが大きすぎてブロック書式設定コンテキストに収まらない場合に何を行うかを定義します。これは、overflow-x および overflow-y の短縮プロパティです。

/* デフォルト値。コンテンツは切り取られず、要素ボックスの外側にレンダリングされます*/
オーバーフロー: 表示可能;

/* コンテンツは切り取られ、残りのコンテンツは表示されなくなります */
オーバーフロー: 非表示;

/* コンテンツは切り詰められ、ブラウザには残りのコンテンツを表示するためのスクロールバーが表示されます */
オーバーフロー: スクロール;

/* ブラウザによって決定されますが、コンテンツがクリップされている場合は、スクロールバーが表示されます */
オーバーフロー:自動;

/* オーバーフロー属性値が親要素から継承されることを指定します*/
オーバーフロー: 継承;

公式の説明:

overlay autoと同じように動作しますが、スクロールバーはスペースを占有するのではなく、コンテンツの上に描画されます。 WebKit ベース ( Safariなど) および Blink ベース ( ChromeやOperaなど) のブラウザでのみサポートされます。

パフォーマンス：

html{
  overflow-y: オーバーレイ;
}

互換性

caniuse でこのプロパティの互換性を見つけられなかったのですが、誰かが次のような質問も出しました:

問題のシナリオと解決策

1. 外側のコンテナのスクロールバー

ここでの外部コンテナーは、最も外側のレイヤーに直接追加される HTML を指します。

html{
  overflow-y: スクロール;
}

この機能を手動で追加すると、スクロール幅のスペースが常に占有されます。

デメリット: スクロールしていないときでもスクロールバーが表示されるので、あまり美しくありません。

利点: 便利、互換性の問題なし。

2. 外部コンテナ絶対位置決め方式

絶対配置を使用すると、本体の幅が常に完全なスペースを維持することが保証されます。

html{
  overflow-y: scroll; // ie8 と互換性あり、サポートされていません: root、vw
}

：根 {
  オーバーフロー-y: 自動;
  オーバーフロー-x:非表示;
}

:ルート本体{
  位置: 絶対;
}

体 {
  幅：100vw;
  オーバーフロー: 非表示;
}

3. 内部コンテナの互換性

.ラッパー{
    overflow-y: scroll; // フォールバック
    overflow-y: オーバーレイ;
}

要約する

個人的には、 overlayを使用し、バックアップとしてスクロールを使用することをお勧めします。

以上が内容のすべてです。皆さんの励みになれば幸いです。

記事に誤りがありましたら、コメント欄にてご指摘いただければ幸いです。

参考文献

https://developer.mozilla.org/zh-CN/docs/Web/CSS/オーバーフロー

https://github.com/Fyrd/caniuse/issues/4027

スクロールバーがスペースを占有することで発生するバグの修正に関するこの記事はこれで終わりです。スクロールバーがスペースを占有することで発生するバグの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: JavaScriptとTypeScriptの関係

>>: Web デザイン体験: 5 つの優れた Web デザインコンセプトの完全分析 (画像)