CODEWITHSUNDEEP
javascriptjquerycssoverflow
yuli chika
yuli chika

Reputation: 9221

jquery body css overflow-x not work

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.

Upvotes: 2

Views: 4463

Answers (2)

Abhay Singh
Abhay Singh

Reputation: 1689

Try using this css:

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 2

Related Questions