[Javascript] jQuery:如何檢測窗口的寬度?


Answers

將你的if條件放入resize函數中:

var windowsize = $(window).width();

$(window).resize(function() {
  windowsize = $(window).width();
  if (windowsize > 440) {
    //if the window is greater than 440px wide then turn on jScrollPane..
      $('#pane1').jScrollPane({
         scrollbarWidth:15, 
         scrollbarMargin:52
      });
  }
});
Question

我的頁面上有一個滾動元素(帶有jScrollPane jQuery插件)。 我想完成的是通過檢測瀏覽器窗口的寬度來關閉滾動窗口的方法。 我正在做一個響應式佈局,我希望在瀏覽器低於一定寬度時關閉此滾動功能。 當我刷新頁面時,我可以使其工作,但是當我調整瀏覽器窗口的大小時,寬度值不會即時更新。

現在,如果我從一個寬度為1000px的窗口開始,然後調整為350px,則滾動功能仍將保留。 我希望滾動功能在瀏覽器寬度達到440px時立即關閉。

這是我迄今為止的代碼。

var windowsize = $(window).width();

$(window).resize(function() {
  var windowsize = $(window).width();
});

if (windowsize > 440) {
  //if the window is greater than 440px wide then turn on jScrollPane..
    $('#pane1').jScrollPane({
       scrollbarWidth:15, 
       scrollbarMargin:52
    });
}



下面是我在屏幕尺寸低於768px時隱藏了一些Id元素,並在768px以上顯示。 它效果很好。

var screensize= $( window ).width();

if(screensize<=768){
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none');
            }
}
else{
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr( "style" );
            }

}
changething = function(screensize){
        if(screensize<=768){
            if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').css('display','none');
            }
        }
        else{
        if($('#column-d0f6e77c699556473e4ff2967e9c0251').length>0)
            {
                $('#column-d0f6e77c699556473e4ff2967e9c0251').removeAttr( "style" );
            }

        }
}
$( window ).resize(function() {
 var screensize= $( window ).width();
  changething(screensize);
});