Hello, everybody! Today we’ll talk about how far to get the current element to the various parts of the page.

When we lazy loading logic, often will encounter all sorts of obtaining the distance problem, such as the distance to the bottom of the page for current element, get the document at the bottom of the page to the visible area window, access to a variety of distance to the brain will be difficult to imagine a graphical classmates feel very round very troublesome, in fact, we just need to get to the five values, The current page can exist in a variety of distance!

I made a special photoshop image:

　

Such as:

Distance between the bottom of the document and the bottom of the viewable window = total document height – document scroll height – viewable window height

Distance between current element and bottom = viewable window height + document scroll height – distance between current element and top of page – current element height

This is not a lot easier ~

Get height code :(there are many ways to get these heights, not listed here)

The console. The log (Windows. PageYOffset | | document. The documentElement. ScrollTop | | document. The body. The scrollTop | | 0) / / document scroll height The console. The log ($(document). Height ()) / / document total height console. The log (document. DocumentElement. ClientHeight) / / visual area window height Console. The log ($(' XXX '). Height (), / / the current element height. The console log ($(' XXX '). Offset (). The top) / / the current element with distance at the top of the pageCopy the code
Web page visible region wide: document. Body. High clientWidth page visible area: document. Body. ClientHeight page visible region wide: document. The body. The offsetWidth (including line width) high page visible area: Document. Body. OffsetHeight (including line width) page of text in full width: the document. The body. The high scrollWidth web page text full text: the document. The body. The high scrollHeight web swept to: ScreenLeft: window.screenLeft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft: window.screenleft Window. The screen. The height of screen resolution: wide window. The screen. The available workspace height: width screen. The window screen. AvailHeight screen available workspace width: window. Screen. AvailWidthCopy the code

If this article has helped you, don’t just keep it a secret! Be bold, like clicking a “like” or following Big Ice, and learn more fun technology blogs with Big Ice!