jquery body css overflow-x not working

Question

我想做一个屏幕宽度判断，当屏幕宽度为bigger than 1024px时，主体滚动条会隐藏，否则当屏幕宽度为smaller than 1024px时，主体滚动条会显示其滚动条。在

见代码

http://jsfiddle.net/xmJzU/（溢出 - X）

http://jsfiddle.net/xmJzU/1/（overflowX）

和测试在

http://jsfiddle.net/xmJzU/show

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

然而，当我拖着我的浏览器边缘，adjuce屏幕宽度小于1,024像素，也没有滚动条显示。谢谢。

Answer 1

它的工作原理，你只需要在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'); 
     } 
    }); 
}); 

Example fiddle

的另一种方法使用JavaScript这是使用CSS3 Media Queries，但显然这取决于你有最小浏览器规范要求。

Answer 2

尝试使用这个CSS：

body { 
width:100%; 
min-width:200px; 
overflow-x:hidden; 
}