材料设计和jQuery，滚动不起作用答案

【问题标题】：Material design and jQuery, scroll not working材料设计和jQuery，滚动不起作用
【发布时间】：2015-10-10 21:00:19
【问题描述】：

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

如果我排除/删除 material.min.js，则 window 上的滚动方法可以完美运行。我的简单 jQuery 代码是这样的：

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

如何在不删除材料设计的情况下让 jQuery 正常工作？可能发生了一些冲突，但控制台没有显示任何内容。

【问题讨论】：

【解决方案1】：

基本上，您应该将滚动事件绑定到 .mdl-layout__content 类，因为 Material Design lite 使该元素可滚动。

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

【讨论】：

【解决方案2】：

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

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

true 指示使用捕获而不是冒泡处理，因此它仍然会触发。不过，我不确定这是否会对材料产生任何负面影响。

【讨论】：

【解决方案3】：

.mdl-layout__content 有 overflow-y:auto 并且你在这个 div 上滚动。如果你愿意，你可以改变这个，但我不推荐这个。

jQuery(document).ready(function(){

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

});

【讨论】：