[javascript] jQuery:如何快速檢測窗口寬度?


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



Related