垂直スクロールバーがまだ表示されていないときの補正方法

これは簡単な修正ですが、私は長い間狂ってしまったので、最終的に解決策があるかどうかを判断することになりました。垂直スクロールバーがまだ表示されていないときの補正方法

簡単に言えば、ほとんどのウェブページをワイドビューポート内に配置します。

例では、ビューポートが1028pxの可能性があり、ページ幅を960pxにしたいとします。

は、だから私のCSSは次のようになります。

#pageWrapper { /* page width is 960 pixels */ 
    margin:0 auto; 
    width:960px; 
}

ことには問題がありません。

この問題は、の高さよりも短い動的ページを開始してからマイページが（jQuery slideOutなどを介して）画面の下に展開され、垂直スクロールバーが表示されるときに発生します。

slideOutの間にページがちらつき、slideInの間に右に点滅するようになります。

20pxの右余白を強制的に使用する方法はありますか？まだmargin:0 auto;を利用していますか？

ありがとうございました。

あなたの 'html'または' body'要素に 'overflow-y：scroll'を使ってみることができますが、これがうまくいくかどうかは分かりません。同時に、3行のjavascript/jqueryでこれを行い、この関数を 'onresize'イベントにアタッチすることができます。 –

もう一つの方法は、スクロールバーが常に存在するようにすることです。これを行うCSSオプションがありますが、私はそれが何であるか覚えていません。 –

@ ErickPetruいいえ、そうではありませんでした。 –

ページの内容が縦にならない場合、ブラウザはウィンドウの右側にスクロールバーを追加します。これにより、ブラウザウィンドウで使用可能な幅が変更されるため、ウィンドウの右側を基準にして中央に配置されるか、または配置されるコンテンツはすべて左に移動します。これは非常に一般的です。

これを制御する方法はいくつもありますが、最も一般的なのは、ウィンドウのoverflow-yプロパティを制御して、スクロールバーを常に持っているか、スクロールバーを決して持っていないことです。

設定overflow-y: scrollは、スクロールバーが常にそこにあるように強制します。

設定overflow-y: hiddenは、スクロールバーを絶対に使用しません。

2012-03-10 22:50:00 jacktheripper

よろしく、ありがとう@jacktheripper。 –

NB：overflow-y: hiddenは、ユーザーが何らかの手段でスクロールしないようにして、下のビューポートの下にあるコンテンツを効果的にレンダリングできないようにします。

2017-01-19 02:15:51 PERoqe

答えて