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

Question

基本上我尝试做的是使用on scroll事件并使用jquery scrollTop（），同时使用[画布外菜单] [1]

这是一个小提琴！ http://jsfiddle.net/k6hsvp1a/

这里的代码没有按预期工作:(滚动事件永远不会触发，scrollTop（）始终返回为0）

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

我的理解是因为非画布菜单使用相对定位的包装器div，因此滚动事件永远不会触发，因为$（window）.scrollTop（）始终返回零。

如何使滚动事件工作并使用scrollTop（）？

Answer 1

调试时间......这有点沉重，但在这种情况下工作：

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

"*"适用于所有元素。

检查出控制台：

  

[div.st-content，context：div.st-content，jquery：＆＃34; 1.9.1＆＃34 ;, constructor：function，init：function，selector：＆＃34;＆＃34; ... ]

因此我们的滚动事件由 .st-content

触发

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

Answer 2

你的小提琴正在摆弄错误的容器。在这里查看我的更新：

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

这就是区别：

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

如果每个块元素的内容都大于其维度并且设置为overflow: scroll（或overflow: auto（或overflow-y或......，您得到了点）），则每个块元素都可以独立滚动。

滚动事件然后触发滚动的实际div，并且不会向窗口冒泡。 （https://developer.mozilla.org/en-US/docs/Web/Events/scroll）

同样令人困惑的是，div尤其也恰好占据了整个窗口，因此它看起来就像是滚动的窗口。