Let's take a look at how to get the position of the cursor relative to the entire page, because the cursor position variable x,y is typically obtained by mouse events (such as MouseMove or MouseDown), and the following two common functions are used to get the cursor's current position relative to the entire page.
Copy Code code as follows:
Gets the horizontal position of the cursor
function GetX (e) {
Generic Event Object
E = e | | window.event;
Check the location of IE in non IE browsers first
return E.pagex | | E.clientx + document.body.scrollLeft;
}
Gets the vertical position of the cursor
function GetY (e) {
Generic Event Object
E = e | | window.event;
Check the location of IE in non IE browsers first
return E.pagey | | E.clienty + Document.body.scrollTop;
}
As in FF, E.pagex is the x-coordinate of the entire page (including the scrolling distance of the scroll bar), while in IE E.clientx represents the x-coordinate currently displayed in the view of the user, plus document.body.scrollLeft (the distance of the horizontal scroll bar). is the complete x-coordinate position.
One of the concepts below is the viewport (viewport), which can be viewed as anything in the browser scroll bar. The viewport also contains parts of the Viewport window, page and scroll bar.
To get the size of the page:
Copy Code code as follows:
Returns the height of the page (may change when adding content)
function PageHeight () {
return document.body.scrollHeight;
}
Returns the width of the page
function PageWidth () {
return DOCUMENT.BODY.SCROLLWIDHT;
}
The ScrollHeight and ScrollWidth (click Lookup) describe in detail the potential width and height of the element, not just the dimensions currently seen.
Next we're going to get the scroll bar position, in other words, the page's distance relative to the viewport's top.
Copy Code code as follows:
function to determine the horizontal scrolling position of the browser
function Scrollx () {
A shortcut, used in the strict mode of IE6/7
var de = document.documentelement;
If the browser has a Pagexoffset property, it is used
return Self.pagexoffset | |
Otherwise, try to get the left-side scroll offset of the root node
(de && de.scrollleft) | |
Finally, try to get the left-side scroll offset of the BODY element
Document.body.scrollLeft;
}
function to determine the vertical scrolling position of the browser
function scrolly () {
A shortcut, used in the strict mode of IE6/7
var de = document.documentelement;
If the browser has a pageYOffset property, it is used
return Self.pageyoffset | |
Otherwise, try to get the top scrolling offset of the root node
(de && de.scrolltop) | |
Finally, try to get the top scrolling offset of the BODY element
Document.body.scrollTop;
}
Let's take a look at how to move the scroll bar, we can use the Scrollto method, which as a window object of an attribute, it has two parameters, that is, x and Y offset, you can scroll to the viewport specified position, two examples
Copy Code code as follows:
If you need to scroll to the top of the browser, you can do so
Window.scrollto (0,0)
If you need to scroll to the specified element, you can
Window.scrollto (0, Pagey (document.getElementById (' content ')));
If you are unfamiliar with the Pagey function, you can go back and review it to get the element's position in the entire document, and give it a second try to consolidate
Copy Code code as follows:
Gets the y position of the element
function Pagey (elem) {
See if we are in the root element
Return elem.offsetparent?
If we can continue to get the last element, increase the current offset and continue to recursively
Elem.offsettop + pagey (elem.offsetparent):
Otherwise, get the current offset
Elem.offsettop;
}
We'll learn how to get the size of the viewport (viewport) and get the size of the viewport to gain insight into what the user can see now.
Copy Code code as follows:
Get the height of the viewport
function WindowHeight () {
A shortcut, used in the strict mode of IE6/7
var de = document.documentelement;
If the browser has a Innerheight property, it is used
return Self.innerheight | |
Otherwise, try to get the root node height
(de && de.clientheight) | |
Finally, try to get the height of the BODY element
Document.body.clientHeight;
}
Get the width of the viewport
function WindowWidth () {
A shortcut, used in the strict mode of IE6/7
var de = document.documentelement;
If the browser has a Innerwidth property, it is used
return Self.innerwidth | |
Otherwise, try to get the root node width
(de && de.clientwidth) | |
Finally, try to get the width of the BODY element
Document.body.clientWidth;
}
You may have some doubts about the attributes of Innerheight,clientheight, so just click on it, and the Mozilla Developer Center explains it clearly.
Finally, a more interesting effect, now the Web front-end is also very popular-"drag-and-drop", the author did not give a specific implementation, but cited a good JS library, dom-drag.js, you can learn the master of the source code, at the same time introduced several popular JS library, jquery also in it. Okay, JavaScript and CSS review to this, what are the questions welcome to the message discussion.
