javascript - 材料设计和jQuery，滚动不起作用

Question

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

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

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

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

score 3 · Accepted Answer

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

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

score 1 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

jQuery(document).ready(function(){

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

});

3 回答 3