滚动事件永不触发，由于包装器DIV，.scrollTop（）始终返回0

Question

Basically what I'm trying to do is use a on scroll event and use jquery scrollTop() while using this [off-canvas menu][1]

Here's a fiddle! http://jsfiddle.net/k6hsvp1a/

Here's the code that isn't working as expected: (The scroll event never fires and scrollTop() always returns as 0)

$( window ).on('scroll', function() {
  console.log($(window).scrollTop());
  console.log('scrolling!');
});

My understanding is that because the off-canvas menu uses a relatively positioned wrapper div, the scroll event never fires because $(window).scrollTop() always returns zero.

How can I make a scroll event work and use scrollTop() ?

Answer 1

Debugging time... this is a little heavy handed, but worked in this scenario:

$("*").on('scroll', function() {
  console.log($(this));
});

The "*" applies to all elements.

Checked out the console:

[div.st-content, context: div.st-content, jquery: "1.9.1", constructor: function, init: function, selector: ""…]

So our scroll event is being triggered by .st-content

$(".st-content").on('scroll', function() {
  console.log($(this).scrollTop());
  console.log("scrolling");
});

Answer 2

Your fiddle is fiddling with the wrong container. Check my update here:

http://jsfiddle.net/k6hsvp1a/1/

This is the difference:

$( '.st-content' ).on('scroll', function() {
  console.log($('.st-content').scrollTop());
  console.log('scrolling!');
});

Every block element can scroll independently if its contents are larger than its dimensions and set to overflow: scroll (or overflow: auto (or overflow-y or... you get the point)).

The scroll event then fires on the actual div that's scrolling, and doesn't bubble up to the window. ( https://developer.mozilla.org/en-US/docs/Web/Events/scroll )

What's also confusing is that this div in particular also happens to take up the whole window, so it looks like it's the window that's scrolling.