The article is the first personal blog
Perhaps you have encountered the following question in programming?
clientX,clientY,pageX,pageY,offsetX,offsetY,screenX,screenY,clientHeight,offsetHeight,scrollHeight,offsetTop,scrollTop,i What does nnerHeight stand for? How to tell if the current list is sliding to the bottom? That’s all right. I’ll tell you all about it.
This paper mainly explains the Y-axis related attributes, X-axis attributes can be followed by analogy.
First we talk about clientX and clientY pageX, pageY, offsetX, offsetY, screenX, screenY.
#Element event clientX and clientY pageX, pageY, offsetX, offsetY, screenX, screenY
ClientX every element of the event, clientY, pageX, pageY, offsetX, offsetY, screenX, screenY. You can try:
const el = document.getElementById("content");
if (el) {
el.addEventListener("click".function(evt) {
console.log(evt.offsetX, evt.offsetY);
console.log(evt.clientX, evt.clientY);
console.log(evt.pageX, evt.pageY);
console.log(evt.screenX, evt.screenY);
});
}
Copy the code# 1. clientX clientY
The X and Y coordinates of the mouse relative to the viewable area of the browser window (window coordinates) represent the X and Y offsets of the viewable area of the page, excluding toolbars, scrollbars, search bars, etc. The value of clientY remains the same regardless of page scrolling.
# 2. pageX pageY
Similar to clientX and clientY, but they use document coordinates instead of window coordinates. Page coordinate Y is basically similar to clientY, except that this value is related to page scrolling. Specifically,pageY = clientY + page scrolling height.
# 3. offsetX offsetY
X and Y coordinates of the mouse relative to the event source element (srcElement).
# 4. screenX screenY
Screen, as its name implies, is used to obtain the distance between the mouse click position and the screen display. The maximum distance should be calculated according to the screen resolution size.
The details are as follows:
#Element clientHeight, offsetHeight, scrollHeight, offsetTop, scrollTop
Every HTML element (including document. The document element documentElement) have clientHeight, offsetHeight, scrollHeight, offsetTop, scrollTop these and the height of the element, For scrolling and position-related properties, you can try to verify them as follows:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
<title>Document</title>
<style>
.children {
width: 200px;
height: 300px;
background-color: pink;
}
#content {
width: 100px;
height: 100px;
background-color: yellow;
padding: 10px;
margin: 21px;
border: 2px solid red;
overflow: auto;
}
</style>
</head>
<body>
<div id="content">
<div class="children">children</div>
</div>
<script>
function show(el) {
console.log(el.clientHeight, el.clientWidth); / / 120 120
console.log(el.offsetHeight, el.offsetWidth); / / 124 124
console.log(el.scrollHeight, el.scrollWidth); / / 320 210
console.log(el.offsetTop); / / 21
console.log(el.scrollTop); / / 0
}
const el = document.getElementById("content");
show(el);
</script>
</body>
</html>
Copy the code# 1. clientHeight/clientWidth
ClientHeight is the visible height inside the content plus its padding.
Height of elements including padding but excluding border, horizontal scrollbar, and margin. For inline elements this property is always 0, in px, and read-only.
-
ClientHeight = CSS height + CSS padding – Horizontal scrollbar height (if present)
-
ClientWidth = CSS width + CSS padding – Vertical scrollbar height (if present)
Return 120 = CSS height(100) + padding (2* 10)
# 2. offsetHeight/offsetWidth
OffsetHeight is also content’s own visible height + its own padding + its own border + scroll bar
This includes padding, border, and horizontal scrollbars, but does not include the height of margin elements. It does not include the height of pseudo-elements such as :before or :after. For inline elements this property is always 0, in px.
-
OffsetHeight = CSS height + CSS padding + horizontal scrollbar height (if present) + border height
-
OffsetWidth = CSS width + CSS padding + vertical scrollbar height (if present) + border height
Return 124 = CSS height(100) + padding (2* 10) + border (2*2)
# 3. scrollHeight/scrollWidth
scrollHeightRepresents the height of the actual content.
-
Without the vertical scroll bar: scrollHeight === clientHeight. The padding of the element is included, but the border and margin are not. ScrollHeight also includes pseudo-elements like ::before and ::after;
-
With a vertical scroll bar: scrollHeight = the height of the child element + the padding height of the current element
Return 320 = child element height(300) + current element padding (2* 10)
In fact, the document also has a special scrollHeight: document. DocumentElement. ScrollHeight
Represents the height of the actual contents of the entire document.
# 4. scrollTop
Represents how far the scrollbar will scroll down when there is a scrollbar, which is the height of the covered part of the top of the element. ScrollTop ==0 is readable and configurable without a scrollbar
ScrollTop can be set to any integer value, and note:
- If an element cannot be rolled (for example, it does not overflow, or the element has a “non-scrollable” attribute), scrollTop will be set to 0.
- Set the value of scrollTop to less than 0. ScrollTop is set to 0
- If a value is set beyond the container’s scrollable value, scrollTop is set to the maximum value.
# 5. offsetTop
The distance from the top border layer of the current element to the top of the content of the nearest parent element, regardless of the scroll bar.
Back to the example above: offsetTop returns 21 = the distance between the element content border and the body.
# window.innerHeight/outerHeight/scrollY/scrollX
# 1. window.innerHeight
The viewport height of the browser window, in pixels; If there is a horizontal scrollbar, include the scrollbar height.
# 2. window.outerHeight
OuterHeight Retrieves the height (in px) of the entire browser window, including the sidebar (if present), window borders (Window Chrome), and window resizing Borders /handles.
# 3. window.scrollY/scrollX
- Window. scrollY represents the vertical scrolling distance of the document;
- Window. scrollX represents the horizontal scrolling distance of the document;
#How do you tell if an element has slid to the bottom?
Premise: Your child content height > current element height
It has already been introduced scrollHeight, scrollTop clientHeight, we found that whether internal elements slide to the bottom in the judgement can use the following contributions:
element.scrollHeight - element.scrollTop === element.clientHeight;
Copy the code// An example
const el = document.getElementById("content");
el.addEventListener("scroll".function() {
if (el.scrollHeight - el.scrollTop === el.clientHeight) {
console.log("What the hell?"); }});Copy the code#How to tell if a web page has slid to the bottom of the window/phone?
Prerequisite: Your content height > mobile window height
Let’s start with a simple sketch:
Try it out:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
<title>Document</title>
<style>
#children {
width: 200px;
height: 3000px;
}
</style>
</head>
<body>
<div id="children">children</div>
<script>
const windowHeight = window.innerHeight;
// Remember to do onScroll anti-shake/throttling
window.onscroll = function() {
const documentHeight = document.documentElement.scrollHeight;
// The range bottom buff can be appropriately increased
if (documentHeight <= window.scrollY + windowHeight) {
console.log("Slide to the bottom of the phone."); }};</script>
</body>
</html>
Copy the codeSee more articles