材质设计和jQuery，滚动不起作用

Question

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

如果我排除/删除material.min.js ，那么window上的scroll方法将完美地工作。 我简单的jQuery代码是这样的：

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

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

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

Answer 1

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

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

Answer 2

dark4p解决了它，但是可能的替代方法是使用：

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

表示使用捕获而不是冒泡处理的true指示，因此仍会触发。 我不确定这是否会与材料产生负面影响。

Answer 3

.mdl-layout__content具有溢出-y：auto，您可以在此div上滚动。 如果您愿意，可以更改此设置，但我不建议这样做。

jQuery(document).ready(function(){

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

});