jquery body css overflow-x not working

Question

我想做一個屏幕寬度判斷，當屏幕寬度爲bigger than 1024px時，主體滾動條會隱藏，否則當屏幕寬度爲smaller than 1024px時，主體滾動條會顯示其滾動條。在

見代碼

http://jsfiddle.net/xmJzU/（溢出 - X）

http://jsfiddle.net/xmJzU/1/（overflowX）

和測試在

http://jsfiddle.net/xmJzU/show

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

然而，當我拖着我的瀏覽器邊緣，adjuce屏幕寬度小於1,024像素，也沒有滾動條顯示。謝謝。

Answer 1

它的工作原理，你只需要在resize處理程序中聲明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，但顯然這取決於你有最小瀏覽器規範要求。

Answer 2

嘗試使用這個CSS：

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