jQuery: Comment détecter la largeur de la fenêtre à la volée?

Question

J'ai un défilement de l'élément sur ma page (avec le jScrollPane plugin jQuery). Ce que je veux accomplir, c'est un moyen de désactiver le défilement de la fenêtre par la détection de la largeur de la fenêtre du navigateur. Je suis en train de faire une mise en page responsive et je veux que cette fonctionnalité de défilement être désactivé lorsque le navigateur est en dessous d'une certaine largeur. Je suis capable de le faire fonctionner lorsque j'actualise la page, mais quand je redimensionner la fenêtre du navigateur, la valeur de la largeur de ne pas mettre à jour à la volée.

Pour l'instant, si je démarre avec une fenêtre qui est 1000px de large puis redimensionner à 350px la fonction de défilement reste. Je veux que la fonction de défilement afin d'arrêter dès que la largeur du navigateur hits 440.

Voici le code que j'ai jusqu'à présent..

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

Changer une variable n'exécute pas comme par magie le code dans le bloc if . Placez le code commun dans une fonction, puis liez l'événement et appelez la fonction:

 $(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

Mettez votre condition if dans la fonction 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
      });
  }
});