モーダルとスクロールバーの扱い方
モーダル（ これらのように ）を使用するアプリケーションまたはサイトで、スクロールバーが必要なときに動的に追加された追加スペースを管理するための最良のアプローチとは何ですか？
現在モーダルを開くと、ページの利用可能なコンテンツの幅は約17px変化する可能性があります（ページにスクロールバーがあるかどうか、ブラウザー、画面の幅、およびモーダル自体にスクロールバーがあるかどうかによって異なります）。この幅の変更により、モーダルを開いたり閉じたりしたときに、モーダルとページビハインドの両方でコンテンツがわずかにリフローされます。
編集して追加します（例：
モーダルが開かれる前
モーダルが開かれた後
モーダル自体は変更されません。ページ幅を変更するのはbodyにoverflow: hiddenを追加することです。これにより、スクロールバーが非表示になるため、ユーザーはモーダル内で（必要に応じて）スクロールできます。
/編集
私は（改善について一般的に考えるように求められた）ユーザーから、「一部のポップアップ[モーダル]が壊れている」とコメントしました。テストでは、これはわずかな幅のみの動きであることを示していますが、スクロールバーが基本的にdisplay: noneとdisplay: blockの間でポップしているため、ぎくしゃくしています。
私が見ることができるオプション：
- 問題のプロンプトが表示されたときに少数のユーザーが不満を述べているものを「修正」し（ただし、すべての人が気づいている可能性があります）、Bootstrapに実装されているものと同様の複雑なスクロールバーの幅をJavaScriptに実装します。
- これが起こらない理由を説明してください
- フロントエンドでより単純なハックを使用して、CSSで幅の変化をアニメーション化し、「バグ」ではなく「機能」にする3番目の方法を試みます。
- 自分に静かにハムし、次のステップに進みます。ごく一部のユーザーのみが言及した理由を使用します。
（1）時間はかかり、多くのテストが必要です、（2）ユーザーを悪化させる可能性があります、（3）ユーザーが明示的に要求したものではありませんが、ちょっと/多分/かもしれない/ある程度はOKであり、（4）は支持されます「便宜」という見出しの下の管理
さまざまな理由でこれらのすべてのオプションが多少不快であることがわかったので、これを解決するUXまたはUIの方法、この種の問題を管理する一般的に受け入れられている方法、または最良のオプションさえありますか？
データの水平オーバーフローもプリオンだと思います。
あなたが対処する必要があるいくつかのこと、そしてあなたが一緒に暮らす必要があるいくつかがあります。
まず一緒に使用するのはWebアプリがモーダルを使用する場合、モーダルを使用するです。これは明白かもしれませんが、すべてのモーダルを排除すると、おそらくユーザーにとって有効な多くのソリューションが変更され、場合によっては（おそらく）影響を受けることになります。あなたがするであろう費用と潜在的な危害は、（おそらく）利益よりも大きいでしょう。
2番目に重要なのはモーダルに配置されるコンテンツの量がわからない場合、スクロールバーが表示されないようにするオプションがないです。
そして3つ目：みんなを幸せにすることは不可能です（そしてそうしようとするビジネス上の理由は決してありません）。最適化は物事を改善することであり、完璧にすることではありません。したがって、問題の重要性が十分に高いかどうかを最初に決定する必要があります。
あなたは実験することができます加えた変更を使って、実験するときは最初にいくつかの簡単な調整を適用してくださいを試してください。
これらは、さらに決定するための土台です。これから提案するアプローチは、いくつかの簡単な実験を行い、それがユーザーの使いやすさを向上させるかどうかを確認することです。
私が提案する最初の実験はページスクロールバーを常に表示するであり、ユーザーのフィードバックを確認します。
モーダルのコンテンツに関しては、何かオーバーフローしている場合にのみスクロールバーを表示し、スクロール可能領域の下部近くで透明になるまで少しフェードすることで、このコンテンツを示します。一部の情報が省略されている極端なケースでは、モーダルに表示するデータがまだあるというインジケーターを追加することも検討します。