材质设计和jQuery，滚动不起作用 [英] Material design and jQuery, scroll not working

问题描述

在包含Google的Material设计时，我无法使用jQuery的 .scroll 方法.我已经使用Material Design Lite制作了网站的导航栏.

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.

如果我排除/删除了 material.min.js ，那么 window 上的滚动方法就可以正常工作.我简单的jQuery代码是这样的:

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

这是JSFiddle http://jsfiddle.net/wwjoxtvp/2/

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

这是codepen: http://codepen.io/MustagheesButt/full/PqBYop/

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

如何在不删除材料设计的情况下使jQuery工作?也许正在发生一些冲突，但控制台未显示任何内容.

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

推荐答案

基本上，应该将滚动事件绑定到.mdl-layout__content类，因为材料设计精简版使该元素可滚动.

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

这篇关于材质设计和jQuery，滚动不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！