jquery - 在这里解释为什么 scrollTop() 总是返回 0

Question

参见 http://codepen.io/anon/pen/NGqPNz

CSS:

html {
  height: 100%;
  overflow-y: hidden;
}
body {
  height: 100%;
  overflow-y: auto;
}

JS:

  $('body').bind("scroll", function () {
    if ($('body').scrollTop()) {
      console.log('triggered!');
    } else {
      console.log($('body').scrollTop());
    }
  });

滚动事件在 body 元素上触发。滚动条在 body 元素上，而不是在 html 或 window 元素上。那么为什么 document.body.scrollTop 或 $('body').scrollTop() 返回 0？

有什么方法可以用这个检测滚动条的位置，或者如果我想使用 height: 100%; 我会卡住吗？溢出:隐藏在 html 元素上？

谢谢!

Answer 1

感谢 Shikkediel 的评论，这似乎是一个 Webkit 错误。如果将一个 div 直接放在 body 中，并将滚动事件绑定(bind)到 div，它就可以工作。

http://codepen.io/anon/pen/bVderq

CSS:

html {
  height: 100%;
  overflow-y: hidden;
}
body {
  height: 100%;
  overflow-y: hidden;
}
.scroll-wrapper {
  height: 100%;
  overflow-y: auto;
}

JS:

$('.scroll-wrapper').bind("scroll", function () {
  if ($('.scroll-wrapper').scrollTop()) {
    console.log('triggered!');
    console.log($('.scroll-wrapper').scrollTop());
  } else {
    console.log($('.scroll-wrapper').scrollTop());
  }
});