jQuery : 창 너비를 즉시 감지하는 방법?

jQuery : 창 너비를 즉시 감지하는 방법?

---

내 페이지에 스크롤 요소가 있습니다 (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
    });
}

---

변수를 변경해도 if-블록 내에서 마술처럼 코드가 실행되지는 않습니다 . 함수에 공통 코드를 배치 한 다음 이벤트를 바인딩하고 함수를 호출합니다.

$(document).ready(function() {
    // Optimalisation: Store the references outside the event handler:
    var $window = $(window);
    var $pane = $('#pane1');

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > 440) {
            //if the window is greater than 440px wide then turn on jScrollPane..
            $pane.jScrollPane({
               scrollbarWidth:15, 
               scrollbarMargin:52
            });
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});

---

resize함수 안에 if 조건을 넣으십시오 .

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

---

페이지 크기를 조정할 때 이것이 유용한 지 모르겠습니다.

$(window).resize(function() {
       if(screen.width == window.innerWidth){
           alert("you are on normal page with 100% zoom");
       } else if(screen.width > window.innerWidth){
           alert("you have zoomed in the page i.e more than 100%");
       } else {
           alert("you have zoomed out i.e less than 100%");
       }
    });

---

아래는 화면 크기가 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);
});

참고 URL : https://stackoverflow.com/questions/9720294/jquery-how-to-detect-window-width-on-the-fly