Capture scroll event on div

Question

I'm trying to capture the scroll event within a Backbone.Marionette.CompositeView, but without success.

As an exercise, I'm rewriting http://www.atinux.fr/backbone-books/ using Backbone.Marionette. As you can see, when you scroll down, more books are fetched and displayed (i.e. infinite scroll). However, I'm unable to capture the scroll event on my view.

Here's my (simplified) code:

  LibraryView = Backbone.Marionette.CompositeView.extend({
    // properties, initializer, etc.

    events: {
      'scroll': 'loadMoreBooks',
      'click': 'loadMoreBooks'
    },

    // some functions

    loadMoreBooks: function(){
      console.log("loadMoreBooks");
    }
  });

The full source code can be seen here: https://github.com/davidsulc/backbone.marionette-atinux-books/blob/scroll/assets/javascript/app.js#L86-89

What I don't understand is that the "click" event is being triggered properly, but the "scroll" event isn't. What am I doing wrong?

---

Edit: so the error was pretty simple in the end... I was passing "el: #content" to the view's contructor, but the scroll was defined in CSS on ".library". So once I changed my DOM from

<div id="content">
  <div class="library">
  </div>
</div>

to

<div id="content" class="library"></div>

everything worked properly...

Solution 1

This code works for me:

var View = Backbone.View.extend({
  events: { "scroll": "scroll" },
  scroll: function(){ console.log( "scrolling..." ); }
});

Check the jsFiddle

As @JoshLeitzel said I think the issue is in the DOM element it self.

Try to by-pass Backbone doing:

$("#content").bind( "scroll", function(){ console.log( "scrolling from jquery directly" ); } );

Also try to replace:

el: $('#content')

by

el: '#content'

I don't think this is the issue but is the new style of el definition :)

Solution 2

Backbone attaches to the top el element to look for all events. Some DOM events are not bubbled to parent elements and this includes scroll. The click event worked because it does bubble.

Ref: http://www.w3.org/TR/2009/WD-DOM-Level-3-Events-20090908/#event-type-scroll

Solution 3

I don't know what your el is, but I suspect it's something that does not receive the scroll event. Since Backbone delegates event handling to jQuery, have a look at what jQuery says about the scroll event:

The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).

Unless your el satisfies those conditions, it will not receive the scroll event. You will have to put the event handler on window or some other element that does receive it.

Comments

[David Sulc]

The el is a div with a fixed height and overflow-y set to scroll. In other words, it should receive the scroll event. Any other idea what might be wrong?

[David Sulc]

Your answer helped me solve the issue, thanks. (See my edit.)

[David Sulc]

SO in the end, the container I was binding to wasn't the same as the one I was defining a scroll on (see my edit). But have an upvote for your help ;-)