Material 设计和 jQuery，滚动不工作

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

jQuery(document).ready(function(){

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

});

Material design and jQuery, scroll not working