Turbolinks 导致滚动事件不会触发答案

【问题标题】：Turbolinks cause on scroll event doesn't fireTurbolinks 导致滚动事件不会触发
【发布时间】：2017-03-09 12:57:22
【问题描述】：

在我的 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。我错过了什么？

【问题讨论】：

【解决方案1】：

尝试使用事件委托：

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

【讨论】：

【解决方案2】：

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

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

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

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

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

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

【讨论】：