解释为什么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元素上，而不是html或window元素上。那么，为什么要修改文档呢。身体scrollTop或$（'body'）。scrollTop（）返回0？

有什么方法可以检测滚动条的位置，或者我卡住了，如果我想使用高度： 100%；溢出：隐藏在html元素？

谢谢

Answer 1

这是因为你有overflow-y:hidden 。删除此选项，然后scrollTop（）将起作用

Answer 2

感谢Shikkediel的评论，这似乎是一个Webkit bug。如果您将一个div直接放在主体内部，并将滚动事件绑定到该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());
  }
});