jQuery: Cách phát hiện chiều rộng cửa sổ khi đang di chuyển?

Question

Tôi có một phần tử cuộn trên trang của mình (với plugin jQuery jScrollPane). Những gì tôi muốn thực hiện là một cách để tắt cửa sổ cuộn bằng cách phát hiện chiều rộng của cửa sổ trình duyệt. Tôi đang thực hiện bố cục đáp ứng và tôi muốn tính năng cuộn này bị tắt khi trình duyệt ở dưới một độ rộng nhất định. Tôi có thể làm cho nó hoạt động khi tôi làm mới trang, nhưng khi tôi thay đổi kích thước cửa sổ trình duyệt, giá trị độ rộng không cập nhật khi đang di chuyển.

Ngay bây giờ nếu tôi bắt đầu với cửa sổ rộng 1000px thì hãy đổi kích thước thành 350px, tính năng cuộn vẫn còn. Tôi muốn tính năng cuộn để tắt ngay sau khi chiều rộng trình duyệt chạm 440px.

Dưới đây là đoạn code tôi có cho đến nay ..

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

Answer 1

Thay đổi một biến không kỳ diệu thực thi mã trong if -block. Đặt mã phổ biến ở một chức năng, sau đó liên kết sự kiện này, và gọi hàm:

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

Answer 2

Đặt của bạn nếu điều kiện bên trong resize chức năng:

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

Answer 3

Tôi không biết nếu điều này hữu ích cho bạn khi bạn thay đổi kích thước trang của bạn:

$(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%"); 
     } 
    }); 

Answer 4

Dưới đây là những gì tôi đã làm để ẩn một số yếu tố Id khi kích thước màn hình dưới 768px và hiển thị khi ở trên 768px. Nó hoạt động rất tốt.

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