材质设计和jQuery，滚动不起作用

Question

I am unable to make use of the .scroll method of jQuery while including Google's Material design. I have used Material Design Lite to make navigation bar of site.

If I exclude/remove material.min.js , then scroll method on window works perfectly. My simple jQuery code is this:

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

Here is the JSFiddle http://jsfiddle.net/wwjoxtvp/2/

And here is codepen: http://codepen.io/MustagheesButt/full/PqBYop/

How can I get jQuery working without removing material design? Maybe some conflict is occurring, but console is not showing anything.

Answer 1

Basically you should bind the scroll event to the .mdl-layout__content class since material design lite is making that element scrollable.

$('.mdl-layout__content').on('scroll', function () {
  console.log('scrolled');  
});

Answer 2

dark4p solved it, but a possible alternative is to use:

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

The true indicating to use capturing rather than bubbling handling so it will still fire. I'm not sure whether this could have any negative interactions with material, though.

Answer 3

.mdl-layout__content have overflow-y:auto and you scroll on this div. If you want you can change this but i don't recommend this.

jQuery(document).ready(function(){

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

});

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