web-dev-qa-db-ja.com

スクロールバーが必要ない場合でも、ページ上にスクロールバーを強制的に配置する必要がありますか?

私が作成しているWebサイトで、ページが非常に短く、1つの画面に収まる場合があります。長いページもあるので、スクロールバーが必要です。私の現在のスタイル設定はパーセンテージで機能します。つまり、スクロールバーのあるページでは、テキストが少ないページからテキストが多いページに移動すると、中央のブロックが左に移動するため、目に見えるシフトがあります(突然のスクロールバーを使用して、作業しなければならない幅を減らします)。

私はスクロールバーを常にオンにすることでこれを解決することについて議論しています。ページが小さいので必要ない場合でも、スクロールバーを常にオンにします。これにより、メインブロックのジャンプが停止しますが、(特に小さな画面では)ページサイズが小さくなり、ユーザーに迷惑をかける可能性があると心配しています。

だから、私の質問、どちらの悪が小さいのですか?スクロールバーを常に存在させるか、ページをナビゲートするときにジャンプする中央ブロックがあるか?

5

しないでくださいスクロールバーが不要なときに強制的に表示します。

これにより、短い画面での視覚的な混乱が増えるだけでなく、(メモリが機能する場合)スクリーンリーダーやその他の支援技術を使用するユーザーのページの使いやすさが低下する可能性があります。 (ターゲットプラットフォームの統計を確認する価値があります。支援技術はlotの可能性をカバーし、多くの開発者が期待するよりも一般的に使用されています。)

代わりにスクロールバーをハッキングすることで、画面から画面に移動してもジャンプしないようにレイアウトルールを微調整します。

正確なアプローチはあなたのコンテキストに依存しますが、ここにいくつかのアイデアがあります...

  • スクロールバーのzオーダーを強制して、マージンを強制的に移動するのではなく、右マージンの上に表示されるようにします。
  • スクロールバーの存在(または存在しない)が変化しないように、最大​​画面幅に基づいて、ページ読み込み時にレイアウトグリッドをピクセル単位で計算します。
  • 固定幅のセットを事前に計算し、デバイスの画面サイズに基づいて選択します(Bootstrapがこれを行います)。この場合も、スクロールバーの有無に応じてパーセンテージが変化するのを回避できます。
3
Bevan

私は同じ問題に出くわしました、そして、「ジャンプ」が非常に迷惑であるのを見つけます。

このトリック:HTML {オーバーフロー:-moz-scrollbars-vertical;上記のコメントでTrezalvesによって提案された https://css-tricks.com/forums/topic/remove-page-shift-in-ff-due-to-scrollbar/ から、}が表示されますFirefoxで解決します。常にスクロールバーを保持しますが、Thumbはなく、終了ボタンは無効になっています。

視野の端での動きにすばやく対応できる能力が生と死の違いになるため、誰もが気晴らしを無視するいくつかの問題を抱えています。しかし、少数派の人々にとって、彼らはそれが何であるかを知っていても動きを無視することはできません。そのため、彼らにとって、画面を静かに保つことは、取るに足らない利点になる可能性があります。

1
MMacD