Series attributes of element offset, client, scroll, etc.

Element offset offset series

offset overview

The offset is translated as the offset. We can dynamically get the position (offset), size, etc. of the element by using the related attributes of the offset series .

Insert picture description here

Get the element distance with the position of the positioned parent element.
Get the size of the element itself.
What is returned is numeric data without a unit .

Common attributes of offset series

offset series attributes	description
element.offsetParent	Returns the nearest ancestor element of this element with positioning. If all ancestor elements are not positioned, the body element is returned.
element.offsetTop	Returns the offset of the element relative to the upper border of the positioned parent element.
element.offsetLeft	Returns the offset of the element relative to the left border of the positioned parent element.
element.offsetWidth	Returns the total width of itself including padding, border, and content.
element.offsetHeight	Returns the total height of itself including padding, border, and content.

The difference between offset and style attributes

Offset can get the style value in any style sheet, and style can only get the style value of the inline style sheet.
The offset gets a numeric value without a unit, and the style.width gets a string value with a unit.
offsetWidth includes padding + border + width; style.width only includes content part.
Attributes such as offsetWidth are read-only attributes , which can only be obtained and used but cannot be assigned; style.width is a readable and writable attribute, which can be obtained or assigned.

To get the size and position of the element, it is more appropriate to use offset. To change the value of the element, you need to use the style attribute to change it.

Element visual area client series

Client translates to the meaning of client. We use the relevant attributes of the client series to obtain information about the visual area of the element. The size of the element's border can be dynamically obtained through the relevant attributes of the client series.

Insert picture description here

client series attributes	description
element.clientTop	Returns the size of the top border of the element.
element.clientLeft	Returns the size of the left border of the element.
element.clientWidth	Returns the total width of itself including padding and content.
element.clientHeight	Returns the total height of itself including padding and content.

Element scroll series attributes

Scroll means scrolling. We can dynamically get the size, scroll distance, etc. of the element using the related attributes of the scroll series.

Insert picture description here

scroll series properties	description
element.scrollTop	Returns the distance to the upper side of the element being rolled.
element.scrollLeft	Returns the distance to the left of the element being rolled.
element.scrollWidth	Returns the actual width of its content.
element.scrollHeight	Returns the actual height of its content .

The concept of being rolled to the head: When an element is set with a fixed width and height, but cannot accommodate the content in it, we have to set the overflow attribute to it. You can hide or set the wheel to scroll to view the content. When the scroll wheel is scrolled, a part of the content inside the element will be rolled out of the element and hidden, and the part rolled out on it is called the scroll head.

Code demo:

<!-- 样式略过 -->
<body>
    <div class="boxFather">
        <div class="boxSon">
            <p>1</p>
            <p style="padding-top: 105px;">2</p>
        </div>
    </div>
</body>
<script>
    var boxFather = document.querySelector('.boxFather');
    boxFather.onscroll = function() {
     
     
    	// 不断输出被卷去的头部
        console.log(boxFather.scrollTop); 
    }
</script>

[External link image transfer failed. The origin site may have an anti-leech link mechanism. It is recommended to save the image and upload it directly (img-nRwpKnBh-1611927022833)(https://s3.ax1x.com/2021/01/29/yiHBj0.gif #pic_center)]

A common scenario is that the scroll bar will automatically appear when the browser is not high enough to display the entire page. When the scroll bar is scrolled down, the hidden height of the page is the head of the page being scrolled. The onscroll event is triggered when the scroll bar is scrolling.
The scrolled header of the page has compatibility issues, so the scrolled header usually has the following writing methods:

Declare DTD, use document.documentElement.scrollTop, that is, use html document.
Without declaring DTD, use document.body.scrollTop, that is, use the body element.
IE9 began to support the new methods window.pageYOffset and window.pageXOffset.

function getScroll() {
    
    
	return {
    
    
 		left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
 		top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
 };
}
// 使用时可以将这两个值当作是函数 getScroll() 的属性值（函数也是对象）。
var y = getScroll().top;

to sum up

The properties of the three series return numeric data without units.
The offset series are often used to obtain the position of an element offsetLeft offsetTop.
The client series are often used to obtain the element size clientWidth clientHeight.
The scroll series are often used to obtain the scroll distance scrollTop scrollLeft.
Scroll through a page from the window.pageYOffsetget.

Three small cases related to them: modal box , magnifying glass effect realization , display and hiding of the button back to the top.