17

固定幅の本文と自動余白を使用して、コンテンツをページの中央に配置しています。コンテンツがページの高さを超え、ブラウザがスクロールバーを追加すると、自動マージンによってコンテンツがスクロールバーの左半分の幅にジャンプします。

これを解決するには、outerHeightとwindow.innerHeightを比較するのが適切ですか？これを解決する別の方法はありますか？

これで問題の情報は十分だと思いますが、他に回答できるかどうか教えてください。

明確にするために編集：スクロールバーを強制的に表示したくありません。

4

7 に答える 7

22

私にはエレガントな解決策のように思えるので、このリンクをここに残しておきます。

https://aykevl.nl/2014/09/fix-jumping-scrollbar

彼がすることは、この css を追加することです:

@media screen and (min-width: 960px) {
    html {
        margin-left: calc(100vw - 100%);
        margin-right: 0;
    }
}

これにより、コンテンツがスクロールバーのサイズだけ左に移動するため、表示された時点でコンテンツは既に移動されています。これは、タグにoverflow: auto;適用された中央揃えのコンテンツで機能します。htmlマージン幅の違いが非常に明白であるため、メディア クエリは携帯電話でこれを無効にします。

ここで例を見ることができます：

http://codepen.io/anon/pen/NPgbKP

于 2016-02-16T16:34:28.667 に答える
7

私は自分でこの問題に遭遇し、それを解決する2つの方法を見つけました:

  1. スクロールバーを常に表示する: に body { overflow-y: scroll; }設定してもhtml、すべてのブラウザーで機能するとは限りません。または、スクロールバーが表示された場合にスクロール バーが2つ表示される場合があります。

  2. スクロールバーがない場合、ページの右マージンに最大 30 ピクセルを追加するクラスを追加します。

オプション 1 を選択しましたが、すべてのブラウザー (特に古いブラウザー) で機能するかどうかはわかりません。

Facebook はオプション 2 を使用します。

于 2012-02-08T21:50:33.677 に答える
7

この CSS を使用します。

body { overflow-y: scroll; }
于 2012-02-08T21:54:07.760 に答える
3

スクロールバーを常に表示するように強制できます。

http://www.mediacollege.com/internet/css/scroll-always.html

于 2012-02-08T21:49:24.337 に答える