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

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

背景

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

文章

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

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

<入力
  // ...
  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 ベース ( ChromeOperaなど) のブラウザでのみサポートされます。

パフォーマンス:

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 デザイン コンセプトの完全分析 (画像)

推薦する

レスポンシブなカードホバー効果を実現するための HTML+CSS

目次成し遂げる:要約:言うことはあまりありませんが、まずは効果を見てみましょう。 カードホバー、レス...

antd pro に基づく SMS 認証コード ログイン機能 (プロセス分析)

目次まとめ全体的なプロセスフロントエンドページコード検証コードとログイン サービスをリクエストする ...

MySQLの通常インデックスとユニークインデックスの違いの詳しい説明

目次1 概念上の区別2 事例紹介3 クエリパフォーマンス4 アップデートのパフォーマンス4.1 記憶...

MAC での MYSQL5.7.17 接続失敗の問題と解決策

MYSQL5.7.17 が MAC で接続できない問題。SQLBench_community 6.3...

Jenkins の紹介と Docker で Jenkins をデプロイする方法

1. 関連概念1.1 Jenkins の概念: Jenkins は、使用されるプラットフォームに関係...

MySQL累積計算実装方法の詳しい説明

目次序文需要分析MySQL ユーザー変数累積計算にMysqlユーザー変数を使用する要約するこの記事で...

プロジェクトにおけるVue3のロジック抽出とフィールド表示についての簡単な説明

目次論理階層化異なる地域から事業を分離するこれを実行する利点このようなシナリオにどう対処するか最適化...

ChromeはCookieの変更を監視し、値を割り当てます

次のコードは、Chrome による Cookie の変更の監視を導入しています。コードは次のとおりで...

ドラミング効果を実現するJavascript

この記事では、ドラミング効果を実現するためのJavascriptの具体的なコードを参考までに紹介しま...

JavaScript の非同期処理で待機時間を節約できますか?

JavaScriptで非同期実行の結果を同期的に取得するには、 for ループ内でawaitを使用...

JS オブジェクト配列の重複排除のための 3 つの方法の例と比較

目次1. 重複排除前後のデータの比較2. 使い方1. フィルターとマップを使用する2. 削減を使用す...

Vue3 における親コンポーネントと子コンポーネント間の値の転送の詳細な説明

vue3 が誕生してからかなり時間が経ち、筆者も最近になって vue3 を学び始めました。 vue2...

JavaScriptで継承を実装するいくつかの方法

目次構造継承(callで実装)プロトタイプチェーン継承(プロトタイプチェーンの助けを借りて実装)複合...

DockerでMongoDBコンテナをデプロイする方法

目次Dockerとは展開する1. イメージをプルする2. 画像を表示する3. コンテナを実行する4....