Désactiver Skrollr pour l'appareil mobile (& lt; 767px)

Tout d'abord tiens à remercier @prinzhorn pour un magnifique et puissant de la bibliothèque. Ma question: j'ai mis en place un Skrollr parallaxe arrière-plan de l'en-tête de mon site, mais je voudrais désactiver cette fonctionnalité lors de l'affichage sur un appareil mobile, en particulier les iphones, etc. par exemple. (max-width: 767px).Je me demandais quelle serait la meilleure façon de le faire? Et si le détruire() la fonction a été en mesure de le faire ou je dois utiliser une autre technique? Aussi, si destroy() est la réponse, comment pourrais-je mettre en œuvre correctement? Beaucoup de grâce et d'exemples ou de démonstration est grandement apprécié.

source d'informationauteur Petef1n

Le détruire() la méthode ne faire que des. Vous pouvez également éviter d'initialisation skrollr sur de petites fenêtres pour commencer, et/ou de détruire skrollr si la fenêtre est redimensionnée pour être petite.

$(function () {
  //initialize skrollr if the window width is large enough
  if ($(window).width() > 767) {
    skrollr.init(yourOptions);
  }

  //disable skrollr if the window is resized below 768px wide
  $(window).on('resize', function () {
    if ($(window).width() <= 767) {
      skrollr.init().destroy(); //skrollr.init() returns the singleton created above
    }
  });
});

Dans cet exemple, skrollr ne pas être à nouveau activée si la fenêtre est redimensionnée pour être grand.

Skrollr a son propre mobile de la fonction de contrôle

var s = skrollr.init();
if (s.isMobile()) {
    s.destroy();
}

Vous pouvez également utiliser le userAgent de détection ainsi, les petites résolutions de bureau encore obtenir l'effet de parallaxe:

//function
$(function skrollrInit() {

    //initialize skrollr
    skrollr.init({
        smoothScrolling: false
    });

    //disable skrollr if using handheld device
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        skrollr.init().destroy();
    }

});

//execute function
skrollrInit();

La .destroy() méthode est la bonne méthode à utiliser; cependant, je l'approche de la présente différemment de ce que l'on a accepté la réponse. L'initialisation de la skrollr exemple un deuxième temps pour détruire, il n'est pas nécessaire et les performances peuvent être améliorées à l'aide de la .get() méthode, comme suit:

$(function () {
  //Init function
  function skrollrInit() {
    skrollr.init(yourOptions);
  }

  //If window width is large enough, initialize skrollr
  if ($(window).width() > 767) {
    skrollrInit();
  }

  //On resize, check window width, if too small
  //and skrollr instance exists, destroy;
  //Otherwise, if window is large enough
  //and skrollr instance does not exist, initialize skrollr.
  $(window).on('resize', function () {
    var _skrollr = skrollr.get(); //get() returns the skrollr instance or undefined
    var windowWidth = $(window).width();

    if ( windowWidth <= 767 && _skrollr !== undefined ) {
      _skrollr.destroy();
    } else if ( windowWidth > 767 && _skrollr === undefined ) {
      skrollrInit();
    }
  });
});

Skrollr n'est jamais initialisée un deuxième temps, si elle existe actuellement et n'est détruite si elle existe. Cela évite les bugs que vous pourriez trouver par le bref instant entre l'initialisation et les détruire (je parle d'expérience).

Dans certains cas, vous venez de désactiver les transitions:

@media only screen and (max-width: 480px){
    .divWithSkrollr{
        transform: none !important;
    }
}

1

Pour moi, je voulais seulement quelques effets pour être désactivée sur certains mobiles. J'ai été en utilisant Bootstrap pour la réactivité, de sorte que certains effets sur le bureau perturbé lorsque les colonnes s'est effondré sur mobile.

Ma solution a été de faire une classe personnalisée sur les effets que je ne voulais pas travailler sur mobile. disable-mobile-skroll et puis supprimer les attributs de données que j'utilisais avant skrollr est en cours d'initialisation.
```
if ($(window).width() < 768) {
    $('.disable-mobile-skroll').removeAttr('data-bottom-top').removeAttr('data-top');
};
//init Skrollr here
```

Vous devez vous connecter pour publier un commentaire.