背景 このバグは 文章 昨日、テスターから問題が報告されました。 最初は赤いボックスの位置が間違っていると思ったので、コードを探しました。 <入力 // ... onFocus={() => setFocusedInputName('guidePrice')} onBlur={() => setFocusedInputName('')} /> <表 データフォーカス列={focusedInputName} // ... /> コードに問題はなく、手動で設定されておらず、私、別の同僚、および PM の PC で正常に動作します。 当初の判断では、赤枠の位置決済に差があり、その差は17pxほどですが、この差はどのようにして生じたのでしょうか? テスターの PC に行って、細かい点に気づきました。私の PC では、スクロール バーが停止していました。 彼の PC では、スクロール バーがスペースを占有しています。 彼は自分のコンピューター上で、元の したがって、 オーバースクロール-y: オーバーレイ overflow CSS プロパティは、要素のコンテンツが大きすぎてブロック書式設定コンテキストに収まらない場合に何を行うかを定義します。これは、overflow-x および overflow-y の短縮プロパティです。 /* デフォルト値。コンテンツは切り取られず、要素ボックスの外側にレンダリングされます*/ オーバーフロー: 表示可能; /* コンテンツは切り取られ、残りのコンテンツは表示されなくなります */ オーバーフロー: 非表示; /* コンテンツは切り詰められ、ブラウザには残りのコンテンツを表示するためのスクロールバーが表示されます */ オーバーフロー: スクロール; /* ブラウザによって決定されますが、コンテンツがクリップされている場合は、スクロールバーが表示されます */ オーバーフロー:自動; /* オーバーフロー属性値が親要素から継承されることを指定します*/ オーバーフロー: 継承; 公式の説明: パフォーマンス: 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: オーバーレイ; } 要約する 個人的には、 以上が内容のすべてです。皆さんの励みになれば幸いです。 記事に誤りがありましたら、コメント欄にてご指摘いただければ幸いです。 参考文献 https://developer.mozilla.org/zh-CN/docs/Web/CSS/オーバーフロー https://github.com/Fyrd/caniuse/issues/4027 スクロールバーがスペースを占有することで発生するバグの修正に関するこの記事はこれで終わりです。スクロールバーがスペースを占有することで発生するバグの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
>>: Web デザイン体験: 5 つの優れた Web デザイン コンセプトの完全分析 (画像)
目次成し遂げる:要約:言うことはあまりありませんが、まずは効果を見てみましょう。 カードホバー、レス...
目次まとめ全体的なプロセスフロントエンドページコード検証コードとログイン サービスをリクエストする ...
1. PAM設定ファイルを編集する sudo vim /etc/pam.d/ログイン2行目に以下を...
目次1 概念上の区別2 事例紹介3 クエリパフォーマンス4 アップデートのパフォーマンス4.1 記憶...
MYSQL5.7.17 が MAC で接続できない問題。SQLBench_community 6.3...
1. 関連概念1.1 Jenkins の概念: Jenkins は、使用されるプラットフォームに関係...
目次序文需要分析MySQL ユーザー変数累積計算にMysqlユーザー変数を使用する要約するこの記事で...
目次論理階層化異なる地域から事業を分離するこれを実行する利点このようなシナリオにどう対処するか最適化...
次のコードは、Chrome による Cookie の変更の監視を導入しています。コードは次のとおりで...
この記事では、ドラミング効果を実現するためのJavascriptの具体的なコードを参考までに紹介しま...
JavaScriptで非同期実行の結果を同期的に取得するには、 for ループ内でawaitを使用...
目次1. 重複排除前後のデータの比較2. 使い方1. フィルターとマップを使用する2. 削減を使用す...
vue3 が誕生してからかなり時間が経ち、筆者も最近になって vue3 を学び始めました。 vue2...
目次構造継承(callで実装)プロトタイプチェーン継承(プロトタイプチェーンの助けを借りて実装)複合...
目次Dockerとは展開する1. イメージをプルする2. 画像を表示する3. コンテナを実行する4....