Meteor 的滚动事件

Posted 2023-03-08

【中文标题】Meteor 的滚动事件

【英文标题】：Scroll event for Meteor

【发布时间】：2014-07-29 11:46:49

【问题描述】：

我在流星文档中找不到流星的滚动事件。当有人在流星应用程序中向下滚动窗口时，我该怎么做？

我试过'scroll window' : function(event) ... ，但没有按预期工作。

【参考方案1】：

我也一直在搞这个。

我还没有找到在Template.template.events 中干净利落的方法。

目前明显的临时解决方案是使用简单的 jQuery 滚动事件。

$(window).scroll(function()//your code); 应该可以解决问题。

我试图用作选择器但无济于事的事情是：

'scroll *'

'scroll body'

'scroll document'

自然而然

'scroll window'

我在通用模板的事件中尝试了所有这些选择器，以及 UI.body 的事件，因为这是包含页面正文的新 blaze 模板。

重申一下：暂时使用 jQuery 可能会更好。

【讨论】：

据我所知没有任何改变：github.com/meteor/meteor/issues/3298

【参考方案2】：

这有点晚了，但我想出了一个解决方案；至少在我当前的项目中。

我正在用 Meteor 实现 D3，我想要一个自定义缩放功能，当用户滚动时改变模板的尺寸。

创建一个反应变量“缩放”

Template.graph.onCreated(function() 
    var self = this;
    self.zoom = new ReactiveVar(0);
    $(window).on('scroll', function(e) 
        // ... event processing stuff; 
        // say it produces value 'zoomAmount' ...
        self.zoom.set(zoomAmount);
    
);

创建一个返回缩放的助手。 在隐藏元素中的模板 DOM 中引用它以使其具有反应性。

Template.graph.helpers(
    zoom: function()  
        // This will be called when 'zoom' changes, 
        // so treat this as your events function
        return Template.instance().zoom.get(); 
    
);

【讨论】：

我遇到的这个问题是，如果您导航到一个页面，然后返回到上一个页面，该事件会被多次添加。

@JakobAlexanderEichler 使用 Template.onDestroyed() 方法将其关闭。

【参考方案3】：

作为部分解决方案，您可以在您关心的任何元素上侦听 mousewheel 事件。很多时候，这正是你想要的。

例如，以下事件侦听器将完全阻止用户使用滚轮滚动，但他们仍然可以使用页面侧面的导航栏。 （如果您没有使用overflowy: hidden; 禁用它）

Template.body.events(
    'mousewheel': function(event, template) 
        console.log("scrolled");
        return false;
    
);

【讨论】：

这个建议让我很紧张。大多数用户可能会使用滚轮，但也有很多用户使用键盘快捷键或其他辅助工具来控制滚动。因此，除非您要实现的目标非常适合“增强”类别，否则根本不能依赖此事件来获取滚动事件。

鼠标滚轮调用并不一定意味着页面已经滚动。

【参考方案4】：

在 Meteor 中，没有原生模板支持滚动事件，因此您必须在 Template.name.onRendered 回调中执行此操作。但是，如果您不将其从Template.name.onDestroyed 中删除，则会发生内存泄漏。这最好通过命名空间事件来完成，因为像 $(window).off('scroll'); 这样的东西会从窗口中分离所有滚动事件。

import  $  from 'jquery';

Template.myTemplateName.onRendered(function()
  // You can do this multiple times
  $(window).on('scroll.whateverNamespace', function()  ... );
  $(window).on('scroll.whateverNamespace', function()  ... );
)

Template.myTemplateName.onDestroyed(function()
  $(window).off('scroll.whateverNamespace');
)

【参考方案5】：

此时真的很晚了，我认为自从提出问题以来已经发生了很大变化，但我自己也遇到了这个问题，对于其他可能需要知道的人来说，我发现可行的方法是创建一个名为“scroll .container”的助手，其中容器是一个 div，其中包含页面的主体（用户将在我的应用程序中滚动的地方）我的函数看起来像这样：

Template.main_page.events(
    'scroll .container': function(event) 
        console.log(event.currentTarget.scrollTop);
    

);