Je ne parviens pas à utiliser la méthode .scroll de jQuery tout en incluant la conception matérielle de Google. J'ai utilisé Material Design Lite pour faire la barre de navigation du site.

Si j'exclus / supprime material.min.js , la méthode de défilement sur fenêtre fonctionne parfaitement. Mon code jQuery simple est le suivant:

jQuery(window).scroll(function () {
  console.log("scrolled");
});

Voici JSFiddle http://jsfiddle.net/wwjoxtvp/2/

Et voici codepen: http://codepen.io/MustagheesButt/full/PqBYop/

Comment puis-je faire fonctionner jQuery sans supprimer la conception matérielle? Peut-être qu'un conflit se produit, mais la console n'affiche rien.

0
Mustaghees 21 juil. 2015 à 15:02

3 réponses

Meilleure réponse

Fondamentalement, vous devez lier l'événement scroll à la classe .mdl-layout__content, car Material Design Lite rend cet élément défilable.

$('.mdl-layout__content').on('scroll', function () {
  console.log('scrolled');  
});
3
prototype 21 juil. 2015 à 12:35

.mdl-layout__content a overflow-y: auto et vous faites défiler sur cette div. Si vous voulez, vous pouvez changer cela, mais je ne le recommande pas.

jQuery(document).ready(function(){

    jQuery('.mdl-layout__content').scroll(function(){
console.log('scrolled');
});

});

http://jsfiddle.net/wwjoxtvp/34/

0
Fatih Kahveci 21 juil. 2015 à 12:41

Dark4p l'a résolu, mais une alternative possible est d'utiliser:

window.addEventListener('scroll', function(){ console.log('scrolled'); }, true);

L'indication true indiquant d'utiliser la capture plutôt que la manipulation par bulles pour qu'elle continue de se déclencher. Je ne sais pas si cela pourrait avoir des interactions négatives avec le matériel.

1
ryachza 21 juil. 2015 à 12:40