问题
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.
回答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');
});
回答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.
回答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/
来源:https://stackoverflow.com/questions/31538512/material-design-and-jquery-scroll-not-working