Explique por que scrollTop () sempre retorna 0 aqui

Vejohttp://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());
    }
  });

O evento de rolagem está disparando no elemento body. A barra de rolagem está no elemento body, não no html ou no elemento window. Então, por que document.body.scrollTop ou $ ('body'). ScrollTop () retorna 0?

Existe alguma maneira de detectar a posição da barra de rolagem com isso ou estou preso se quiser usar a altura: 100%; estouro: oculto no elemento html?

Obrigado!

questionAnswers(2)

yourAnswerToTheQuestion