100% height on body and html creates scroll issue

Question

I'm having a problem I really never had , I have this page and in order to created an intended effect I had to set both the body and the HTML tag to a height of 100%. After I did this I couldn't calculate scroll amount, I tried :

$(window).on('scroll', function() {
 console.log($(window).scrollTop());
});

After I had no luck with that I tried attaching this to the body instead and in this case the event fires and is able to tell when I am scrolling but it always returns a scroll value of 0.

$('body').on('scroll', function() {
 console.log($('body').scrollTop());
});

I am using Chrome on Mac OSX. This has been tested in Firefox on the same computer and it works without a problem but not on Chrome or Safari so I imagine it's something related to webkit.

Anyone have any idea how I can solve this ?

Answer 1

if you do

console.log(scrollY)

it will get the scroll value of the window