What's the best way to detect scrolling in Ember JS? There is no built in scroll action, and I can use jquery but not sure where to place it? Would it go in my application.js because it has application scope, or elsewhere?

The actual scroll detection/logic is not an issue here, but rather how to set up scripts like this in an Embery way.

Ideally scrolling would be an action, and could be handled as such in the application.js file:

import Ember from 'ember';

export default Ember.Route.extend({
    actions: {
        onScroll: function() {
            alert('scrolled');
        }
    }
});

What's the best way to detect scrolling in Ember JS? There is no built in scroll action, and I can use jquery but not sure where to place it? Would it go in my application.js because it has application scope, or elsewhere?

The actual scroll detection/logic is not an issue here, but rather how to set up scripts like this in an Embery way.

Ideally scrolling would be an action, and could be handled as such in the application.js file:

import Ember from 'ember';

export default Ember.Route.extend({
    actions: {
        onScroll: function() {
            alert('scrolled');
        }
    }
});

• javascript
• ember.js
• web-applications
• scroll
• action

• Have a look at this answer and it's twiddle . that has been explained for resize you can replace it with scroll ... – Ember Freak Commented Sep 20, 2016 at 15:16

2 Answers 2

At work we used the lifecycle hooks to register/unregister event that are not implemented in Ember. We used the didInsertElement and willDestroyElement lifecycle hooks to bind/unbind jQuery events to a specific namespace (often the ponents ID): https://guides.emberjs./v2.8.0/ponents/the-ponent-lifecycle/

Code example:

import Ember from 'ember';

export default Ember.Component.extend({

  didInsertElement() {
    this._super(...arguments)

    // Register your events here
    Ember.$(document).on('scroll.my-namespace', 'body', this.eventHandler)
    // this.$ if the element is located inside the ponent
    },

  willDestroyElement() {
    this._super(...arguments)

    Ember.$(document).off('scroll.my-namespace')
    // this.$ if the element is located inside the ponent
  },

  eventHandler(ev) {
      //Do sth with event
  }

})

An alternative way could be a service which extends Ember.Evented. IN that service you could also register a jQuery Event listener. The ponents which need to listen to the scroll event could subscribe to the service (http://emberjs./api/classes/Ember.Evented.html).

I ended up using this awesome library, ember-perfectscroll. It wraps the necessary templates, and provides a ton of useful CSS classes/functions.