Question

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

参见

中的代码

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

它可以工作，你只需要在你的resize处理程序中声明width变量，因为全局变量不在它的＆＃39;范围。

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;
}

jquery body css overflow-x不行

2 个答案: