If you need to know the exact location of an element during web page creation. The following tutorials and examples will help you:

First, the size of the web page and browser window size

  • The size of a web page is usually determined by two factors: 1. The size of the page content and 2
  • Browser size: Usually refers to the area of the web page seen in the browser window, also known as a viewport.
  • The size of the page is the same as the size of the browser if the content is fully displayed in the browser window (without scroll bars). If you cannot display all of them, the browser will display a scroll bar (the height is not fully displayed, the scroll bar appears on the Y axis, the width is not fully displayed, the scroll bar appears on the X axis)

Get the size of the page

The size of the element itself offsetWidth, offsetHeight

OffsetWidth = Content + (width of vertical scroll bar) + padding + border

  • Each element of a web page has the clientHeight and clientWidth attributes. These two attributes refer to the visual area occupied by the content of the element plus the padding, excluding the border and scrollbar positions.

offsetParent

Element. offsetParent Definition: offsetParent must satisfy three conditions for the closest location element in the ancestor that contains an element

  • 1. It is the ancestor of Element
  • 2. Closest to element
  • 3. Is a position element, that is, the position attribute is not static
<div class="position-outer" style="position: relative;">
    <div class="position-inner" style="postion: relative;">
        <div class="not-position">
        	<div class="box">
        	</div>
        </div>
    </div>
</div>
Copy the code

Outputs the offsetParent of the box element: box: has three ancestor elements:

  • Position-outer, a positioning element of level 3
  • The hierarchy consists of two position-inner elements
  • Level 1 positions the element not-position

Therefore, positon-inner satisfies the above three conditions about offsetParent

Gets the absolute position offsetLeft/offsetTop of a web page element

Definition: Element’s offset to the left edge offsetParent computes the offset of element to the entire document flow

/ / the parent of the localization of the position offset + element recently distance parent var acturalTop = element. The offsetParent. OffsetLeft + element. The offsetLeft;Copy the code

Here you can use the offsetLeft and offsetTop APIS to achieve the common magnifying glass effect for mall shoppingMagnifying glass effect code implementation

Gets the relative position of the element

Element. scrollLeft: Returns the distance between the left edge of the element and the view, which in this case refers to the content of the element (including child elements and content).

Element. scrollTop: Returns the distance between the upper edge of an element and the view

ClientWidth: Returns the width of the padding + content of the element that does not contain the border

ClientHeight: Returns the height of the padding + content of the element that does not contain the border

With the absolute position of the element, it’s easy to get the relative position by subtracting the absolute value from the distance of the page’s scroll bar. The vertical scrolling distance of the scroll bar is the document.scrollTop property; The horizontal distance the scroll bar scrolls is the Document. scrollLeft property.

/ / 1. Get the document the height of the roll out contentScrollTop = document. The body. The scrollTop | | document. The documentElement. ScrollTop; / / 2. As shown in the figure below, how to obtain com.lowagie.text.paragraph distance document var paragraphViewLeft = com.lowagie.text.paragraph. OffsetParent. OffsetLeft - com.lowagie.text.paragraph. ScrollLeft; var paragraphViewTop = paragraph.offsetParent.offsetTop - paragraph.scrollTop;Copy the code

ScrollWidth and scrollHeight

Element. scrollWidth: Returns the overall width of the element, including invisible parts that cannot be displayed on the page due to overflow. Element. scrollHeight: Returns the overall height of the element, including invisible parts that cannot be displayed on the page due to overflow.

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta http-equiv=" x-UA-compatible "content="ie=edge"> <title>test</title> > #parent_div{ width: 200px; height: 180px; background: skyblue; overflow: auto; } #children_div{ width: 300px; height: 320px; background:green; color: white; } </style> </head> <body> <div id="parent_div"> <div id="children_div"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab praesentium consectetur, eligendi odit labore blanditiis repudiandae quam quia, atque eius ipsam suscipit quaerat in dicta. Soluta quasi quam eveniet ex. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus voluptate error fugiat dignissimos doloremque veritatis reiciendis illum hic repudiandae nobis a  tempore quae accusamus, Ab Architecto Suscipit Sumenda Dolorem explicabo. </div> </div> <script> // Output the actual size of the son elements including the width and height of the roll out console.log(children_div.scrollWidth, children_div.scrollHeight) </script> </body> </html>Copy the code

Wireless pull-down scrolling is realized by scrollHeight attribute and scrollTop() method

$("#comment_list_box").scroll(() =>{var nScrollHeight = 0; Var nScrollTop = 0; Var nDivHight = $("#comment_list_box").height(); nScrollHight = $("#comment_list_box")[0].scrollHeight; nScrollTop = $("#comment_list_box").scrollTop(); console.log(nDivHight, nScrollHight, nScrollTop); If (nScrollTop + nDivHeight >=) the ajax request in the dropdown is in finsh state if(nScrollTop + nDivHeight >= nScrollTop - 100 && ! this.isFinish && ! This.isloading) {// Pull the data of the dropdown this.initList(); // Load the corresponding page data}})Copy the code

Infinite drop-down scroll implementation renderings

A quick way to get the position of an element

  • GetBoundingClientRect (), which contains the left,right,top, and bottom properties, corresponding to the distance between the upper left and lower right corner of the window
Get the relative position of the element:var X = this.getBoundingClientRect().left;
var Y = this.getBoundingClientRect().top;
// Add the scrolling distance to get the absolute position of the element
var X = this.getBoundingClientRect().left + document.documentElement.scrollLeft;
var Y = this.getBoundingClientRect().top + document.docuemtElement.scrollTop;
Copy the code

Reference Documents:

Ruan Yifeng teacher about the location of elements

ScrollWidth, scrollHeight, scrollLeft, scrollTop