javascript - jquery body css overflow-x 不起作用

Question

我想做一个屏幕宽度判断，当屏幕宽度大于1024px时，body滚动条会隐藏，否则当屏幕宽度小于1024px时body滚动条将显示其滚动。

代码见

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

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

然后测试

http://jsfiddle.net/xmJzU/show

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

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

Answer 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 ，但这显然取决于您的最小浏览器规范要求。