スクロールバーを表示/非表示のとき、表示の左右位置がカクカクずれる

HTML のデザインのお話です。

ウインドウの幅に収まる、収まらないによってスクロールバーが表示されたり、されなかったりしますが、そのときに画面に配置しているボタンなどのコンポーネントが”カクカク”左右に揺れます。

これを抑止するるには常にスクロールバーを表示するようにするとよいです。

では具体的にスクロールバーを常に表示させる方法とは

スタイルシート CSS に

html {
  overflow-y:scroll;
}

を追加してください。

ただし、CSS3　対応しているブラウザでないといけません。

モダンブラウザなら心配ありません。

CSS3非対応の古いブラウザならやむを得ずこうしましょう。

■レガシーブラウザ

html {
  margin-bottom:1px;
  height:100%;
}

これを使ってしまうと、印刷したときになにも載らない無駄な空白ページが印刷されます。

overflow-y