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

Answer 1

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

Answer 2

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 :)

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