jquery body cssオーバーフロー-xが動作しない

スクリーン幅が 1024px より大きい場合、ボディースクロールバーが非表示になります。スクリーン幅が 1024px より小さい場合、ボディースクロールバーは表示されません。そのスクロールを表示します。

のコードを参照してください

http://jsfiddle.net/xmJzU/ (overflow-x)

     

http://jsfiddle.net/xmJzU/1/ (overflowX)

そして

http://jsfiddle.net/xmJzU/show

     

http://jsfiddle.net/xmJzU/1/show

しかし、ブラウザの端をドラッグして、画面の幅を1024ピクセルより小さくすると、スクロールバーが表示されません。ありがとう。

2

2 答え

グローバル変数がスコープにないため、resizeハンドラ内で width 変数を宣言するだけで動作します。

jQuery(document).ready(function() {
    var width = $(window).width();
    if (width < 1025) {
        $('body').css('overflow-x', 'scroll');
    } else {
        $('body').css('overflow-x', 'hidden');
    }

    $(window).bind('resize', function() {
        var width = $(window).width();
        if (width < 1025) {
            $('body').css('overflow-x', 'scroll');
        } else {
            $('body').css('overflow-x', 'hidden');
        }
    });
});

フィドルの例

このためにjavascriptを使用する別の方法は、 CSS3 Media Queries を使用することですが、明らかにこれはあなたが持っている最小ブラウザの仕様に依存しています。

2
追加された
正直、ありがとう、後で認められた答え。
追加された 著者 yuli chika,

このCSSを使用してみてください:

body {
width:100%;
min-width:200px;
overflow-x:hidden;
}
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript