jquery body css溢出-x不起作用答案

【问题标题】：jquery body css overflow-x not workjquery body css溢出-x不起作用
【发布时间】：2011-11-25 09:28:06
【问题描述】：

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

查看代码

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

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

然后测试

http://jsfiddle.net/xmJzU/show

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

但是，当我拖动浏览器边缘，调整屏幕宽度小于 1024 像素时，没有出现滚动条。谢谢。

【问题讨论】：

标签： javascript jquery css overflow

【解决方案1】：

它有效，您只需要在调整大小处理程序中声明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，但显然这取决于您的最小浏览器规范要求。

【讨论】：

【解决方案2】：

尝试使用这个 css：

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

【讨论】：