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 'scroll window' : function(event) { ... } which doesn't work as expected.

Evangelinaevangeline

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.

Outfoot

as far as I can tell nothing has changed on this: github.com/meteor/meteor/issues/3298 – Heddle

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

Drawn

This issue, I am having with it is, that the event is added multiple times, if you navigate to one page, and back to the previous one. – Collenecollet

@JakobAlexanderEichler use the Template.onDestroyed() method to turn it off. – Kirstiekirstin

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

Disconformity

Answer 4

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

});

Facsimile

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

Spiker

This suggestion makes me twitchy. Most users likely use a wheel, but plenty grab, use keyboard shortcuts or other accessibility tools to control scrolling. So unless what you're trying to achieve fits very much into the 'enhancement' category then this event can't be relied on at all for picking up a scroll event. – Dainedainty

Mouse wheel invocation doesn't necessarily mean that the page has been scrolled. – Longdrawn