Web サイトや HTML アプリの水平スクロールバーは、一般的に使い勝手が悪く、望ましくありません。それらが予期せずに発生することはかなり一般的であり、迅速にデバッグして削除する方法が必要です。
デザインに問題のある HTML 要素をすばやく簡単に見つける方法は何ですか?
はい、疑わしい要素が見つかるまで要素を 1 つずつ削除/非表示にしながらページを移動できますが、特に問題のある要素が複数ある場合、これには時間がかかります。ショートカットをクリックするか、スクリプトを実行して、疑いのあるすべての要素を強調表示したり、輪郭を描いたり、コンソールに出力したりすると便利です。
明確にするために、問題はそれを解決する方法ではなく、それを検出する方法です。この問題が発生したときにいつでも機能する一般的な解決策が必要です。
より狭い範囲では、(幅を取得するために) jQuery を使用しnode.scrollWidth、境界をオーバーフローするコンテンツを持つノードを取得できます。
コンテンツを流してしまうと、そもそも水平スクロール バーが表示されません。幅の制約を多くしすぎないでください。通常、すべてのコンテンツを含むメイン列の (最小) 幅のみを設定します。一部の垂直バー (ナビゲーション バーなど) の幅を制限することもできます。それ以外の場合は、CSS 幅プロパティ (およびその他のそのようなメカニズム) を慎重に使用してください。
CSS の空白プロパティも、スクロールバーを必要とする傾向があります。このプロパティは慎重に使用してください。これは実際にはコードをフォーマットするためだけのものであり、整列のために HTML ソースに現れるように改行を維持することが重要です。