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

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

背景

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

文章

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

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

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

推薦する

Kylin V10 サーバーで Storm をコンパイルしてインストールする詳細なプロセス

1 はじめにApache Storm は、Hadoop と同様に、大量のデータを処理するために使用で...

iframe を更新する 3 つの方法

コードをコピーコードは次のとおりです。 <iframe src="1.htm&quo...

MYSQL開発パフォーマンス調査:バッチデータ挿入の最適化方法

1. どのような問題に直面しましたか?標準 SQL では、通常、次の SQL 挿入ステートメントを記...

Explainキーワードに基づいてMySQLインデックス機能を最適化する方法

EXPLAIN は、MySQL がインデックスを使用して選択ステートメントを処理し、テーブルを結合す...

JavaScript イベント ループのケース スタディ

js のイベント ループJavaScript はシングルスレッドなので、同じイベントで実行できるメソ...

MySQL8インストーラーバージョングラフィックチュートリアル

インストール必要な書類は下部に記載されていますステップ1 mysql-installer-web-c...

Nginx が Apache より優れている理由

Nginx は、わずか数年で Web サーバー市場の大部分を占めるようになりました。周知のとおり、N...

サーバーストレステストの概念と方法 (TPS/同時実行性)

目次1 ストレステストの指標1.1 秒あたり1.2 クォータ1.3 平均処理時間(RT) 1.4 同...

MySQL 実験: explain を使用してインデックスの傾向を分析する

概要インデックス作成は、MySQL で習得しなければならないスキルであり、MySQL クエリの効率を...

MySQL 5.7.16 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)

Ubuntu 16.04 に MySQL 5.7 をインストールするにはどうすればいいですか?メイ...

HTML チュートリアル: DOCTYPE の省略形

HTML コードを書くとき、最初の行は DOCTYPE にする必要がありますが、DOCTYPE は通...

表のセルの内容が超過した場合に省略記号効果を表示する(実装コード)

例示するフロントエンド開発では、セルの幅を制限し、コンテンツが制限を超える部分に省略記号を表示する必...

ログインと登録を実現するSpringboot+VUE

この記事の例では、ログインと登録を実装するためのspringboot+VUEの具体的なコードを参考ま...

Vue プロジェクトで axios リクエストを使用する方法

目次1. インストール2. カプセル化に問題はない3. ファイルを作成する4. アドレス設定をリクエ...

マスタークラスタに再参加する k8s ノードの実装

1. ノードを削除するkubectl delete node node01を実行します。 2. この...