inViewUtils.js

• Detect if the dom is within the view, as well as some other dom-related helper functions.
• 中文说明
• Online demo

Install

npm i in-view-utils

Use

ES6

import {isInDomView} from "in-view-utils"
//like
isInDomView(...)

script html label

 //like
  window.inViewUtils.isInDomView({...})

The main functional functions

| function name | description | arg | return| | -------- | :----- | :----|:----| | isInDomView | Detects whether the dom is visible inside the container dom | Refer to the isInDomView description | boolean| | isInView | Detects if the dom is fully visible within the window | The dom object being detected | boolean| | getScrollableChildren |Gets one scrollable child node | Refer to the getScrollableChildren description| dom or null| | getDomToVisbleDis | Gets the distance between the dom entering the dom container viewable area | Refer to the isInDomView desc | {x:number,y:number}| | getDomToViewVisbleDis| Gets the distance from the dom to the window viewable| Refer to the getDomToViewVisbleDis description| {x:number,y:number}|

Other function

| function name | description | arg |return| | -------- | :----- | :---- |:----| | getBoundingClientRect | Gets the dom's rect object |dom | rect object| | getRectHeight | Gets the height of the dom rect object, if the label is rotated 90 degrees or -90 degrees, the result is based on the height of the device orientation, no longer a style attribute | dom | number| | getRectWidth | Gets the width of the dom rect object, if the label is rotated 90 degrees or -90 degrees, the result is based on the height of the device orientation, no longer a style attribute | dom |number| | getViewPortHeight | Gets the window height | - |number| | getViewPortWidth | Gets the Window width | - |number| | getBlockWidth | Gets the height of the view after the computed css property, which is a style property in the traditional sense | - |number| | getBlockHeight | Gets the view after the width is calculated after the css property, which is a style property in the traditional sense | - |number| | getBodyScrollY | Gets the body Y-axis scroll | - |number| | getBodyScrollX | Gets the body X axis scroll | - |number| | getDomScrollX | Gets the dom X-axis scroll | dom |number| | getDomScrollY | Gets the dom Y axis to scroll | dom |number|

Diagram

img1

img2

Api description

isInDomView

description

Detects whether the dom is visible in the parent container dom

arg

typeof arg == object

• dom: The target dom of the detected
• wrapDom: Detect the parent container (dom) of the dom
• overallVisible: Whether the part is visible in the parent container, the default is no, if true is set, the part of the visible isInDomView function will also return true, such as [img 2], otherwise it will only be true if it is shown in figure 1

getScrollableChildren

description

Get the scrollable elements in the dom, and then return, if not, null

arg

len of arg ===3

• arg1：The dom to be detected
• arg2:Maximum number of hierarchical traversals, default 100
• arg3:Direction of scrolling, optional v (vertical, default) and h (horizontal scrolling)

return

A dom or null

getDomToVisbleDis

desc

Get the distance from the dom to the visual area of the container dom,

arg

typeof arg == object

• dom :The element being detected
• viewPort: dom (scrollable parent container)
• yOtherHeight: The height of the bottom mask of the Y axis
• xOtherHeight：The mask height at the bottom of the X axis
• rotate: Container rotation angle, optional 0, 90, -90

return

{
  x:number,
  y:number
}

getDomToViewVisbleDis

desc

Gets the distance from the dom to the window area of the browser window, returns {x:number,y:number} If it is like {x:0,y:0}, it is within the visual area

arg

typeof arg == object

• dom: The element being detected
• yOtherHeight: The height of the bottom mask of the Y axis
• xOtherHeight: The mask height at the bottom of the X axis

return

{
  x:number,
  y:number
}

Q&A

The difference between getRectHeight and getBlockHeight

The difference is only if the container is set to rotate 90 degrees or 90 degrees.

1. GetRectHeight is the height obtained by gettingBoundingClientRect
2. GetBlockHeight is the height obtained through getComputedStyle.

1. GetBoundingClientRect is always based on the orientation of the device, and the result is the orientation of the device above the meaning of the left and right up and down and width and height
2. GetComputedStyle simply reads the css styles that are in effect