1. Scroll overview

Scroll translates to scroll, and we can use the related properties of scroll series to dynamically obtain the size and scrolling distance of the element.

ClientHeight and scrollHeight are normally the same

2. The curly header of the page

Scroll bars appear automatically if the browser is not tall (or wide) enough to display the entire page. When the scroll bar scrolls down, the height of the page is hidden, we call the page rolled out of the head. The onScroll event is triggered when the scroll bar scrolls.

3. Header compatibility solution for pages being rolled out

It is important to note that the page is rolled out of the header, compatibility problems, so the header is usually written as follows:

  1. Declares the DTD, the use of the document. The documentElement. ScrollTop
  2. Without declaring a DTD, use Document.body.scrolltop
  3. The new methods window.pageYOffset and window.pageXOffset are now supported in IE9
function getScroll() { return { left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0, top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 }; } getScroll().leftCopy the code

4. Window. PageXOffset and window. PageYOffset

The pageXOffset and pageYOffset properties return the pixels in which the document scrolls horizontally and vertically in the upper-left corner of the window.