jquery body css overflow-x не работает

Question

Я хочу сделать оценку ширины экрана, когда ширина экрана bigger than 1024px, полоса прокрутки тела будет скрыта, иначе, когда ширина экрана smaller than 1024px, полоса прокрутки тела покажет свою прокрутку.

См.код в

http://jsfiddle.net/xmJzU/ (переполнение-х)

http://jsfiddle.net/xmJzU/1/ (переполнениеX)

И проверка в

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

Пример скрипки

Альтернативным способом использования javascript для этого является использование CSS3 Media Queries , но, очевидно, это зависит от ваших требований к спецификации минимального браузера.

Answer 2

Попробуйте использовать этот CSS:

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