Material design and jQuery, scroll not working

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.

score 3 · Accepted Answer · answered Jul 21 '15 at 12:35

3

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');  
});

answered Jul 21 '15 at 12:35

prototype

3,303
2
27
42

so the scroll event does not bubbles upto window or document? – Mustaghees Jul 21 '15 at 12:38
No it does not - only the ```.mdl-layout__content``` can be scrolled - material design lite does something with the layout. – prototype Jul 21 '15 at 12:58
What if I want to apply this for only one page, but .mdl-layout__content gets included on all page. – Rahul Sagore Oct 13 '15 at 09:29
@RahulSagore then just execute the script above only on that specific page. – prototype Oct 13 '15 at 10:24

score 1 · Answer 2 · answered Jul 21 '15 at 12:40

1

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.

answered Jul 21 '15 at 12:40

ryachza

4,460
18
28

thanks. this also works. i was only thinking of bubbling – Mustaghees Jul 21 '15 at 12:50
How can we check if the bottom of page has been reached using this code? – Rahul Sagore Oct 13 '15 at 09:30
@RahulSagore You should be able to calculate that using `.scrollTop` and `height`/`.innerHeight`. – ryachza Oct 13 '15 at 11:27

score 0 · Answer 3 · answered Jul 21 '15 at 12:41

.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/

Material design and jQuery, scroll not working

3 Answers3

Linked