Scroll event for Meteor

Question

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

Answer 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.

Answer 2

This is really late at this point, and I assume much has changed since the question was asked, but I came across this problem myself, and for anyone else that may need to know, the method that I found to work was to create a helper called 'scroll .container' where the container is a div that contains the main body of the page (where the user would scroll in my application) My function looked something like this :

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

});

Answer 3

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

Answer 4

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

Answer 5

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