“Understanding the HTML versus BODY Element in CSS” is the best description — just read it.
html and body elements are distinct block-level entities, in a parent/child relationship.html element’s height and width are controlled by the browser window.html element which has (by default) overflow:auto, causing scrollbars to appear when needed.body element is (by default) position:static, which means that positioned children of it are positioned relative to the html element's coordinate system.body element, not padding on the html element.The browsers have different interpretations of the scrollTop property. Most browsers will read it from the body tag, but Firefox gets it from the html tag.
If you want to ignore IE8 and older, then the cross-browser method is to read to window.pageYoffset property.
Scroll this page and watch the numbers in the white box in the lower, right corner.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies semper erat, a mattis risus pharetra vel. Curabitur tincidunt metus vel pulvinar maximus. Fusce lacinia velit quis diam condimentum egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras quis pellentesque augue. Donec eu tincidunt nisl. Nulla facilisis consequat nisl ac accumsan. Donec ac feugiat arcu, et vulputate ex. In tincidunt ex sem, ac porta turpis sodales ut. Suspendisse hendrerit, quam eget tristique consequat, mi lorem venenatis nulla, vel sodales elit eros ut leo. Pellentesque nisi magna, ultricies quis placerat at, tincidunt a enim. Curabitur vitae nibh ac lorem efficitur aliquet. Integer quis malesuada velit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies semper erat, a mattis risus pharetra vel. Curabitur tincidunt metus vel pulvinar maximus. Fusce lacinia velit quis diam condimentum egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras quis pellentesque augue. Donec eu tincidunt nisl. Nulla facilisis consequat nisl ac accumsan. Donec ac feugiat arcu, et vulputate ex. In tincidunt ex sem, ac porta turpis sodales ut. Suspendisse hendrerit, quam eget tristique consequat, mi lorem venenatis nulla, vel sodales elit eros ut leo. Pellentesque nisi magna, ultricies quis placerat at, tincidunt a enim. Curabitur vitae nibh ac lorem efficitur aliquet. Integer quis malesuada velit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies semper erat, a mattis risus pharetra vel. Curabitur tincidunt metus vel pulvinar maximus. Fusce lacinia velit quis diam condimentum egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras quis pellentesque augue. Donec eu tincidunt nisl. Nulla facilisis consequat nisl ac accumsan. Donec ac feugiat arcu, et vulputate ex. In tincidunt ex sem, ac porta turpis sodales ut. Suspendisse hendrerit, quam eget tristique consequat, mi lorem venenatis nulla, vel sodales elit eros ut leo. Pellentesque nisi magna, ultricies quis placerat at, tincidunt a enim. Curabitur vitae nibh ac lorem efficitur aliquet. Integer quis malesuada velit.