JS offset, Client, Scroll family

The family of offset

1. Locate the parent

Definition: offsetParent is the element closest to it that has been positioned;

According to the definition, it can also be divided into the following situations:

If the element itself is fixed, the parent element is unpositioned or positioned, and offsetParent is null.

<div id="parent">

    <div id="son" style="position: fixed">

    </div>

</div>

<! -- JS -->
<script>
    function $(id) {
        return typeof id === "string" ? document.getElementById(id) : null;
    }
    var getParent = $("son").offsetParent;
    console.log(getParent);
  
  	/* >>> getParent = null */
</script>



Copy the code

The element itself has no fixed position, and the parent has no fixed position. OffsetParent is the body

<div id="parent">
    <div id="son" style="position: absolute">
    </div>
</div>

<! -- JS -->
<script>
    function $(id) {
        return typeof id === "string" ? document.getElementById(id) : null;
    }
    var getParent = $("son").offsetParent;
    console.log(getParent);
  
  	/* >>> getParent = ...  */
</script>
Copy the code

There is no fixed position in the element itself. There is a position in the parent element. OffsetParent is the nearest and positioned element.

<div id="grandfather" style="position: relative">
    <div id="parent">
        <div id="son">

        </div>
    </div>
</div>

<! -- JS -->
<script>
    function $(id) {
        return typeof id === "string" ? document.getElementById(id) : null;
    }
    var getParent = $("son").offsetParent;
    console.log(getParent);
  
  	/* >>> getParent = 
         
          ... 
         
 */
</script>
Copy the code

… The offsetParent property value is null.

2. The offset

offsetTop

Definition: Gets the top coordinate position of the element’s nearest offsetParent relative to the page:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The offset</title>
    <style>
        #grandfather{
            width: 500px;
            height: 500px;
            border: 5px orange solid;
            position: relative;
        }

        #parent{
            width: 300px;
            height: 300px;
            border: 5px salmon solid;
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        #son{
            width: 100px;
            height: 100px;
            border: 10px solid seagreen;
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>

<div id="grandfather">

    <div id="parent">

        <div id="son"></div>

    </div>

</div>

<script>
    function $(id) {
        return typeof id === "string" ? document.getElementById(id) : null;
    }
    var getLeft = $("son").offsetLeft;
    console.log(getLeft);
  
  	/* Pure distance without borders >>> getLeft = 90 */
</script>
</body>
</html>
Copy the code

offsetLeft

Definition: Gets the value of the left position of the element’s nearest offsetParent relative to the page:

<script>
    function $(id) {
        return typeof id === "string" ? document.getElementById(id) : null;
    }
    var getTop = $("son").offsetTop;
    console.log(getTop);
  
  	/* Pure distance without borders >>> getTop = 90 */
</script>
Copy the code

3. Width and height

offsetWidht

Definition: offsetWidht is the width of the visible area of the element.

Element offsetWidht = box line width + box width + box horizontal inside margin

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Visible width and height</title>
    <style>
        #box{
            width: 300px;
            height: 50px;
            padding: 20px;
            border: 5px solid #17a2b8;
        }
    </style>
</head>
<body>
<div id="box">

</div>
<script>
    var box = document.getElementById("box");
    var getWidth = box.offsetWidth;
    console.log(getWidth);
  	/* Left and right borders (5 *2 = 10px) + width (300px) + Left and right margins (20 *2 = 40px) = 350px GetWidth = 350; console.log(box-style.width); >>> 350px */
</script>
</body>
</html>
Copy the code

offsetHeight

Definition: offsetHeight is the height of the visible region of the element.

OffsetHeight = Box line width + box height + box vertical inside margin

<! -- HTML code as above -->
<script>
    var box = document.getElementById("box");
    var getHeight = box.offsetHeight;
    console.log(getHeight);
  
  	/* Top and bottom border (5 * 2 =10px) + Height (50px) + top and bottom inner margin (20 * 2 = 40px) = 100px >>> getHeight = 100 */
</script>
Copy the code

In contrast to box.style.width, offsetWeight and offsetHeight can only read width and height.

The client client

Client Client size refers to the amount of space taken up by the element content to the inner margin.

Width and height

Definition: clientWidht is the width of the visible area of the element.

The element’s clientWidht = box width + box horizontal inner margin

This method gets the width of , which varies with the size of the window.

clientWidth

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Visible width and height</title>

    <style>
        #box{
            width: 300px;
            height: 50px;
            padding: 20px;
            border: 5px solid #17a2b8;
        }
    </style>
</head>
<body>

<div id="box">

</div>

<script>
    var box = document.getElementById("box");
    var getWidth = box.clientWidth;
    console.log(getHeight);
  
  	/* Width (300px) + left and right inner margins (20 * 2 = 40px) = 340px This method returns a numeric type >>> getWidth = 340 */
</script>
</body>
</html>
Copy the code

clientHeight

<! -- HTML code get width -->
<script>
    var box = document.getElementById("box");
    var getHeight = box.clientHeight;
    console.log(getHeight);
  
  	/* Height (50px) + left and right inner margins (20 * 2 = 40px) = 340px This method returns a numeric type >>> getHeight = 90 */
</script>
Copy the code

The frame size

clientLeft

Definition: The size of the client’s left border

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Get border size</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            border: 10px solid orange;
        }
    </style>
</head>
<body>

<div id="box">

</div>
</body>
<script>
    var box = document.getElementById("box");
    var getBorder = box.clientLeft;
    console.log(getBorder);
  
  	/* Returns a number >>> getBorder = 10 */
</script>
</html>
Copy the code

clientTop

Definition: The size of the border on the client

<! ClientTop clientLeft -->
Copy the code

Note:

All client properties are read-only;
If you set the element display: None; Property, client client property value is 0;
Try to avoid repeated access to these properties.

Scroll page

Width and height of the page

ScrollHeight and scrollWidth

Definition: Represents the full height and width of a web page element, including content that cannot be invisible on a web page due to scrolling overflows.

Content not overflowed

When there is no scrollbar, the value obtained is the same as clientHeight, containing only the inner margin and width and height

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Width and height of the page</title>

    <style>
        #box{
            width: 100px;
            height: 200px;
            padding: 5px;
            border: 1px solid orange;
        }
    </style>
</head>
<body>
<div id="box">

</div>

<script>
    var box = document.getElementById("box");
    var getHeight = box.scrollHeight;
    console.log(getHeight);
  
  	/* >>> getHeight = 210 */
</script>
</body>
</html>
Copy the code

Content of the overflow

When content overflows, whether the box is set to overflow: Hidden or overflow: Scroll will be computed at full height.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Width and height of the page</title>

    <style>
        #box{
            width: 100px;
            height: 200px;
            padding: 5px;
            border: 1px solid orange;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="box">
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
</div>

<script>
    var box = document.getElementById("box");
    var getHeight = box.scrollHeight;
    console.log(getHeight);
  
  	/* >>> getHeight = 482 */
</script>
</body>
</html>
Copy the code

The page is rolled up

ScrollTop and scrollWidth

Definition: the height and width of the page to be rolled. The values of scrollTop and scrollWidth are writable.

S without scrolling

When the element is not rolled, the value of scrollTop is zero.

rolling

ScrollTop is the number of scrolls to scroll when the page is being scrolled

When the page is rolled to the bottom, the following formula applies:

scrollHeight = clientHeight + scrollTop

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Width and height of the page</title>

    <style>
        #box{
            width: 100px;
            height: 200px;
            padding: 5px;
            border: 1px solid orange;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div id="box">
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
</div>

<script>
  
    var box = document.getElementById("box");
    var getTop = box.scrollTop;
    console.log(getTop);
  
  	/* >>> getTop = 0 Note: page initialization defaults to unscrolltop and the initial value is zero so an event is required to use */
  
  	// Scroll events
  	box.onscroll = function () {
        console.log(box.scrollTop);
    }
  	
</script>
</body>
</html>
Copy the code