Explain why scrollTop() always returns 0 here

Question

See http://codepen.io/anon/pen/NGqPNz

CSS:

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

Answer 1

Try to change "height: 100%;" by "height: 100vh;"

Answer 2

Thanks to Shikkediel's comment, it appears to be a Webkit bug. If you put a div immediately inside the body, and bind the scroll event to the div, it works.

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 3

It's because you have overflow-y: hidden;. Remove this and then scrollTop() will work