背景 このバグは 文章 昨日、テスターから問題が報告されました。 最初は赤いボックスの位置が間違っていると思ったので、コードを探しました。 <入力 // ... 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 はじめにApache Storm は、Hadoop と同様に、大量のデータを処理するために使用で...
コードをコピーコードは次のとおりです。 <iframe src="1.htm&quo...
1. どのような問題に直面しましたか?標準 SQL では、通常、次の SQL 挿入ステートメントを記...
EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...
js のイベント ループJavaScript はシングルスレッドなので、同じイベントで実行できるメソ...
インストール必要な書類は下部に記載されていますステップ1 mysql-installer-web-c...
Nginx は、わずか数年で Web サーバー市場の大部分を占めるようになりました。周知のとおり、N...
目次1 ストレステストの指標1.1 秒あたり1.2 クォータ1.3 平均処理時間(RT) 1.4 同...
概要インデックス作成は、MySQL で習得しなければならないスキルであり、MySQL クエリの効率を...
Ubuntu 16.04 に MySQL 5.7 をインストールするにはどうすればいいですか?メイ...
HTML コードを書くとき、最初の行は DOCTYPE にする必要がありますが、DOCTYPE は通...
例示するフロントエンド開発では、セルの幅を制限し、コンテンツが制限を超える部分に省略記号を表示する必...
この記事の例では、ログインと登録を実装するためのspringboot+VUEの具体的なコードを参考ま...
目次1. インストール2. カプセル化に問題はない3. ファイルを作成する4. アドレス設定をリクエ...
1. ノードを削除するkubectl delete node node01を実行します。 2. この...