Question

I want make a screen width judge, when screen width is bigger than 1024px, the body scroll bar will hidden, else when screen width is smaller than 1024px the body scroll bar will show its scroll.

See code in

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

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

And test in

http://jsfiddle.net/xmJzU/show

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

However when I dragged my browser edge, adjuce screen width smaller than 1024px, there have no scroll bar appear. Thanks.

Answer 1

It works, you just need to also declare the width variable inside your resize handler as the global variable is not in its’ scope.

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

An alternative method to using javascript for this is to use CSS3 Media Queries, but obviously this is dependant on the min-browser spec requirements you have.