An article to help you thoroughly understand position calculation in js

introduction

List of APIs involved in the article:

1. scroll related API
2. Client related API
3. Offset related API
4. Element.getBoundingClientRectAPi
5. Window.getComputedStyleApi

We will analyze these APIs layer by layer based on API definitions and application scenarios in well-known open source libraries. It is sufficient to handle most scenarios related to element position calculation in work.

Note that you must be extra careful when using the location calculation APIs. Improper use of them may cause layout thrashing and affect page rendering.

scroll

First, let's take a look at the scroll-related properties and methods.

Element.scroll()

The Element.scroll() method is an Element interface used to scroll to a specific coordinate in a given element.

element.scroll(x-coord, y-coord)
element.scroll(options)

• x-coord refers to the pixel you want to display in the horizontal direction of the upper left area of ​​the element.
• y-coord refers to the pixel you want to display in the vertical direction of the upper left area of ​​the element.

That is, element.scroll(x,y) will scroll the element scroll bar to the corresponding x,y position.

It also supports calling element.scroll(options) and passing in additional configurations:

{
    left: number, 
    top: number,
    behavior: 'smooth' | 'auto' // smooth scrolling or default direct scrolling}

Element.scrollHeight/scrollWidth

Element.scrollHeight This read-only property is a measure of the height of an element's content, including content that is not visible in the view due to overflow.

The value of scrollHeight is equal to the minimum height the element needs to be in order to fit its contents within the viewport without using scroll bars. Without a vertical scroll bar, the scrollHeight value is equal to the minimum clientHeight required for the element's view to fill all of its contents. Includes the element's padding, but excludes the element's border and margin. scrollHeight also includes pseudo-elements such as ::before and ::after.

In other words, Element.scrollHeight is always equal to clientHeight when there is no scroll bar on the element.
However, if a scroll bar appears, scrollHeight refers to the height of the invisible content of the element. When a scroll bar appears, scrollHeight is always greater than clientHeight.

• Element.scrollWidth This is also a read-only property of the element's content width, including content that is not visible in the view due to overflow.

The principle is the same as scrollHeight, except that it is width instead of height.

Simply put, if an element does not have a scroll bar, then their scroll and client are equal values. If there is a scroll bar, the client will only calculate the height/width of the current element displayed, while scroll will not only calculate the height/width of the current element displayed, but also the height/width of the content hidden by the scroll bar of the current element.

clientWidth/height + [scroll bar hidden content width/height] = scrollWidth/Height

Element.scrollLeft/scrollTop

• The Element.scrollTop property gets or sets the number of pixels to scroll vertically for an element's content.
• The Element.scrollLeft property can be used to read or set the distance from the element's scroll bar to the left side of the element.

Note that if the element's content direction is rtl (right-to-left), the scroll bar will be at the far right (where the content begins) and the scrollLeft value will be 0. At this point, when you drag the scroll bar from right to left, scrollLeft will change from 0 to a negative number.

ScrollLeft/Top are frequently used APIs for operating scroll bars in daily work. They are settable values. The position of the scroll bar can be controlled according to different values.

In fact, these two attributes can achieve the same effect as the Element.scroll() above.

In actual work, if there is a frequent demand for scrolling operations, I personally recommend using better-scroll, which is a universal js scrolling library for mobile/web. The internal scrolling is based on element transform and will not trigger related reshaping/reflux.

Determine whether the current element has a scroll bar

The appearance of a scroll bar means that the element space will be larger than its content display area. Based on this phenomenon, we can get the rules for determining whether a scroll bar should appear.

export const hasScrolled = (element, direction) => {
  if (!element || element.nodeType !== 1) return;
  if (direction === "vertical") {
    return element.scrollHeight > element.clientHeight;
  } else if (direction === "horizontal") {
    return element.scrollWidth > element.clientWidth;
  }
};

Determine if the user has scrolled to the bottom

Essentially, when a scroll bar appears on an element, the height of the current element + the height of the scroll bar = the height of the element itself (including the hidden part) is determined.

element.scrollHeight - element.scrollTop === element.clientHeight

client

MouseEvent.clientX/Y

MounseEvent.clientX/Y is also a read-only property that provides the horizontal coordinates of the application client area when the event occurs.

For example, when you click in the upper left corner of the client area, the clientX/Y values ​​of the mouse event will be 0, regardless of whether the page has vertical/horizontal scrolling.

In fact, MouseEvent.clientX/Y is calculated relative to the current viewport (browser visible area).

Repost a very straightforward picture:

Element.clientHeight/clientWidth

The Element.clientWidth/clinetHeight properties represent the intrinsic width of the element in pixels. This property includes padding, but excludes border, margin, and vertical scroll bar (if any).

Inline elements and elements without CSS styles have a clientWidth property value of 0.

When no scroll bar appears, Element.clientWidth/Height === Element.scrollWidth/Height

Element.clientTop/clientLeft

Element.clientLeft represents the width of an element's left border, expressed in pixels. If the element's text direction is right-to-left (RTL), and a vertical scroll bar appears on the left side due to content overflow, this property includes the width of the scroll bar. clientLeft does not include the left margin and left padding. clientLeft is read-only.

Similarly, Element.clientTop represents the width of the top border of the element and is also a read-only property.

These two properties are rarely used in daily life, but you should also know them to avoid confusing these properties with similar names.

offset

MouseEvent.offsetX/offsetY

The read-only property offsetX/Y of the MouseEvent interface specifies the offset between the event object and the padding edge of the target node in the X/Y axis direction.

I believe that students who have used offest have a deep understanding of this attribute. It is the offset relative to the left/top of the parent element.

Note that the triggering element is e.target. Be extra careful if the event object contains a child element when moving to the inside of the child element. e.offsetX/Y is the offset relative to the upper left corner of the child element.

offsetWidth/offsetHeight

HTMLElement.offsetWidth/Height is a read-only property that returns the layout width/height of an element.

The so-called layout width is relative to the clientHeight/Width and offsetHeight/Width we mentioned above. They do not include the width/height of the border and scroll bar (if any).

OffsetWidth/offsetHeight returns the layout width/height of the element, including the element's border, padding on the horizontal/vertical lines, vertical/horizontal scrollbar (scrollbar) (if any), and the width set by CSS.

offsetTop/left

HTMLElement.offsetLeft is a read-only property that returns the pixel value of the current element's top left corner offset from the left border of the HTMLElement.offsetParent node.

Note that the returned offset is relative to the left edge of the HTMLElement.offsetParent node.

What is HTMLElement.offsetParent?

HTMLElement.offsetParent is a read-only property that returns a pointer to the nearest (in terms of the containing hierarchy) positioned element that contains the element or the nearest table, td, th, body element. When the element's style.display is set to "none", offsetParent returns null. offsetParent is useful because offsetTop and offsetLeft are relative to its padding boundaries. -- MDN

To put it in plain language, if the ancestor component node of the current element does not have any table, td, th, and the position attribute is relative, absolute, etc. for positioned elements, offsetLeft/offsetTop returns the offset from the left/top corner of the body.

When there is a positioned element (or the tag element mentioned above) among the ancestor elements, it can be called the offsetParent of the element. The offsetLeft/offsetTop value of an element is equal to the distance from the left side of its left border/top side of its top border to the left border of its offsetParent element.

Let’s look at this picture:

Calculate the offset of the element from the body

When we need to get the distance between an element and the body, but cannot determine whether the parent element has a positioned element (most of the time in component development, it is not clear whether the parent node has a positioned element). At this time, you need to implement a method similar to jqery's offset(): get the offset of the current element relative to the body.

• You cannot directly use offsetLeft/offsetTop to obtain it because it is not certain whether the parent element has a positioned element.
• Use recursion to solve and accumulate offset when the current offsetParent is not body.
• Continue recursively upwards, adding offset to offsetParent, until the body element is encountered.

const getOffsetSize = function(Node: any, offset?: any): any {
  if (!offset) {
    offset = {
      x: 0,
      y: 0
    };
  }
  if (Node === document.body) return offset;
  offset.x = offset.x + Node.offsetLeft;
  offset.y = offset.y + Node.offsetTop;
  return getOffsetSize(Node.offsetParent, offset);
};

Note: parentNode cannot be used here. As mentioned above, offsetLeft/top refers to the offset of HTMLElement.offsetParent rather than the offset of parentNode.

Element.getBoundingClientRect

Usage

The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

element.getBoundingClientRect() returns the position relative to the upper-left corner of the viewport.

The height and width returned by element.getBoundingClientRect() are for the width and height of the visible area of ​​the element (the specific size is determined by box-sizing), and do not include the content where the scroll bar is hidden.

TIP: If it is a standard box model, the element's size is equal to the sum of width/height + padding + border-width. If box-sizing: border-box, the element's size is equal to width/height.

rectObject = object.getBoundingClientRect();

The return value is a DOMRect object, which is a set of rectangles returned by the getClientRects() method of the element, that is, the CSS border size of the element. The result returned is the smallest rectangle that contains the entire element, and has read-only properties of left, top, right, bottom, x, y, width, and height that describe the entire bounding box in pixels. Properties other than width and height are calculated relative to the upper-left corner of the view window.

Width and height are used to calculate the size of the element, and other attributes are relative to the upper left corner of the viewport.

Scrolling within the viewport area (or other scrollable elements) is taken into account when calculating the bounding rectangle, meaning that the top and left property values ​​change immediately when the scroll position changes (thus, their values ​​are relative to the viewport, not absolute). If you need to get the property value relative to the upper left corner of the entire web page, just add the current scroll position (through window.scrollX and window.scrollY) to the top and left property values. This way you can get a value that is independent of the current scroll position.

Calculates whether the element appears within the viewport

The advantage is that the element's distance from the viewport is smaller than the size of the viewport.

Note that even if it becomes a negative value, it means that the element once appeared on the screen but is not displayed now. (Like sliding)

This is how the source code of the vue-lazy image lazy loading library is judged.

 isInView():boolean {
    const rect = this.el.getBoundingClientRect()
    return rect.top < window.innerHeight && rect.left < window.innerWidth
  }

If rect.top < window.innerHeight, it means the current element has already appeared in the page, and the same goes for left.

window.getComputedStyle

Usage

The Window.getComputedStyle() method returns an object that reports the values ​​of all CSS properties of an element after applying the active style sheet and resolving any underlying calculations those values ​​might contain. Private CSS property values ​​can be accessed through the API provided by the object or by simply indexing using the CSS property name.

let style = window.getComputedStyle(element, [pseudoElt]);

element

• An Element used to get the computed style.

pseudoElt Optional

• A string specifying the pseudo-elements to match. Must be omitted (or null) for normal elements.

The returned style is a live CSSStyleDeclaration object that automatically updates itself when the element’s style changes.

Summarize

This is the end of this article about position calculation in js. For more relevant content about position calculation in js, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!