Material design and jQuery, scroll not working

六月ゝ 毕业季﹏ 提交于 2019-12-25 02:54:07

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!