Geek Answers Handbook

Material design and jQuery scrolling not working

I cannot use the .scroll method for jQuery, including the Google Material design. I used Material Design Lite to create a site navigation bar.

If I exclude / delete material.min.js , then the scroll method in the window works fine. My simple jQuery code:

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

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

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

How can I get jQuery to work without removing material design? Perhaps some kind of conflict is occurring, but the console does not show anything.

0
source share
3 answers

Basically you should bind the scroll event to the .mdl-layout__content , since the lite .mdl-layout__content design makes this element scrollable.

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

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

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

true indicates capture is used, not bubble handling, so that it works anyway. I am not sure if this can have any negative interactions with the material.

+1
source

.mdl-layout__content have overflow-y: auto, and you scroll this div. If you want, you can change this, but I do not recommend it.

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

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

0
source

More articles:


All Articles