解释为什么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？

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

谢谢！

Answer 1

感谢Shikkediel的评论，它似乎是一个Webkit错误。如果你将div放在body中，并将scroll事件绑定到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());
  }
});

Answer 2

这是因为你有overflow-y: hidden;。删除它，然后scrollTop()将起作用

Answer 3

尝试更改“高度：100％”；通过“高度：100vh;”