cssアブソリュートポジショニングの隠しスクロールバー...ひねりあり

Question

私は最小解像度1024 x 768をターゲットとするウェブサイトで作業しています。だから、私たちは約970ピクセル幅です。実際にこの幅（正確には1288px）を超えるバナーを中心とする興味深いレイアウトでデザインが戻ってきましたが、解像度は高くてもユーザーには良く見えますが、1024でうまく見えます。

スクロールバーが1024のものの上に現れないようにしました。私はバナーを絶対的に配置し、オーバーフロー-xを使用しました。これは、ターゲットブラウザ全体でうまく動作します。

クライアントが戻ってくると、800 X 600（これはターゲットではありません）のユーザーにスクロールバーが表示され、重要なログインボタンが表示されます。

これは、ユーザーの2％に急激な変更を加えることなくどのように対応できますか？私が考えることができるのは、画面の幅を検出し、overflow-x：hiddenを削除することだけです。

要件がビルドプロセスの後半に変更された場合、あなたは気に入るはずです！

編集 - ここで私はそれが私には十分に簡単だと思われます - ここには注意点がありますか？

if (screen.width < 1024) { 
    $("body").css("overflow-x", "visible"); 
} 

Answer 1

バナーを3つの部分に分割するのはどうですか？

1. 左側が800ピクセルを超えています。
2. 中心が800ピクセルです。
3. 右側が800ピクセルを超えています。

は次に中央800ピクセルが断たれたら、彼らはスクロールバーを取得する、唯一の1と3

そのようにするためにoverflow-x: hidden;を設定します。たとえば、1100ピクセルで、バナー全体を見ることができない場合、スクロールバーは表示されません。

Answer 2

私は画面の幅を検出し、overflow-xを削除することをお勧めします：hiddenがおそらく最も良いでしょう。いくつかのjavascriptを使うのはかなりシンプルにすべきです。

Answer 3

このようなものはどうですか（try it）？最後のセレクタは、少なくともIE 6との最小限の互換性を保つためのものです。もちろん、私が指定した最小幅を調整してレイアウトを最適化するように調整する必要があります。

<div style="background: url(/images/banner.jpg) no-repeat center top;"/> 

<div>があなたのためにクリッピングのケア、オーバーフロー、およびサイジングの問題がかかりますし、あなたが勝った：あなたが代わりに<img>のバナーの背景画像に<div>を使用することができ

html { 
    margin: 0; 
    overflow: auto; 
    padding: 0; 
} 

body { 
    margin: 0; 
    min-width: 1024px; 
    overflow-x: hidden; 
    padding: 0; 
} 

* html body { 
    width: 1024px; 
} 

Answer 4

overflowハックの束を必要としない。