Turbolinks导致滚动事件不会触发

Question

在我的Rails 5应用程序上，我有一个应该在scroll事件上触发的脚本，但由于某种原因，我无法使用turbolinks gem。

我的代码：

第一次尝试：

$("#side-block").on("scroll page:load", function(e) {
    console.log("scroll");
}

第二次尝试：

$(document).on('turbolinks:load', function() {
  $("#side-block").on("scroll page:load", function(e) {
    console.log("scroll");
  });
});

两者都没有运气。脚本已正确加载，但未触发on scroll。我错过了什么？

Answer 1

尝试使用事件委派：

$(document).on("scroll", "#side-block", function(e) {
    console.log("scroll");
}

https://github.com/turbolinks/turbolinks#running-javascript-when-a-page-loads

Answer 2

问题与元素上的错误overflow属性有关。根据jQuery文档：

  

当用户滚动到元素中的其他位置时，滚动事件将发送到元素。它适用于窗口对象，也适用于可滚动框架和元素，其中溢出CSS属性设置为滚动（或当元素的显式高度或宽度小于其内容的高度或宽度时自动）。

这就是为什么scroll事件从未被触发的原因。

此外，我发现使用此代码包装JS（使用turbolinks gem时）非常有用：

$(document).on('ready page:load', function() {
   ...
 });

它允许我在呈现页面后操纵页面元素。