Scroll event for Meteor

问题

I couldn't find a scroll event for meteor in the meteor docs. How do I go about doing something as someone scrolls the window down in a meteor application?

I've tried 'scroll window' : function(event) { ... } which doesn't work as expected.

回答1:

I've been messing around with this as well.

I haven't found a way to do it cleanly within Template.template.events.

The obvious temporary solution right now would be using a simple jQuery scroll event.

$(window).scroll(function(){//your code}); should do the trick.

Things I was trying to use as the selector but to no avail were:

'scroll *'

'scroll body'

'scroll document'

and naturally

'scroll window'

I tried all of these selectors inside of a generic template's events, along with on UI.body's events, as that's the new blaze template that encompasses the page's body.

To reiterate: You're probably better off using jQuery for the time being.

回答2:

This is a bit late but I came up with a solution; at least in the context of my current project.

I'm implementing D3 with Meteor, and I wanted a custom zoom functionality that changes the template's dimensions when the user scrolls.

Create a reactive variable 'zoom'

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);
    }
});

Create a helper that returns zoom. Reference it in the template DOM in a hidden element to make it reactive.

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

回答3:

In Meteor there is no native template support for scroll events, so you have to do within your Template.name.onRendered callback. However, you will get a memory leak if you don't remove it from Template.name.onDestroyed. This is best accomplished with namespaced events, since something like $(window).off('scroll'); will detach all scroll events from window.

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');
})

回答4:

As a partial solution, you can listen for the mousewheel event on whatever element you care about. A lot of times this is exactly what you want anyways.

As an example, the following event listener will prevent the user from scrolling with the scroll wheel at all, but they will still be able to use the navigation bar on the side of the page. (If you have not disabled it with overflowy: hidden;)

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

来源：https://stackoverflow.com/questions/24111765/scroll-event-for-meteor

标签

javascript

jquery

meteor