JavaScript and CSS review (3)_javascript skills

Let’s first look at how to get the cursor’s position relative to the entire page, because the cursor position variables x and y are generally obtained through mouse events (such as mousemove or mousedown). The following two general functions are used to obtain the current cursor position relative to the entire page. Location.

Copy code The code is as follows:

//Get the horizontal position of the cursor
function getX(e) {
//Generalized event object
e = e || window.event;
//Check the location of the non-IE browser first, then check the location of IE
return e.pageX || e.clientX document.body.scrollLeft;
}

//Get the vertical position of the cursor
function getY(e) {
//Generalized event object
e = e || window.event;
//Check the location of the non-IE browser first, then check the location of IE
return e.pageY || e.clientY document.body.scrollTop;
}

For example, in FF e.pageX is the X coordinate in the entire page (including the scrolling distance of the scroll bar), while in IE e.clientX represents the X coordinate in the view currently displayed in front of the user, and You need to add document.body.scrollLeft (the distance of the horizontal scroll bar) to get the complete X coordinate position.
The following concept is the viewport, which can be regarded as everything within the browser scroll bar. Some components also included in the viewport are the viewport window, pages, scroll bars, etc.
Get the size of the page:

Copy the code The code is as follows:

//Return the height of the page ( It may change when adding content)
function pageHeight() {
return document.body.scrollHeight;
}
//Return the width of the page
function pageWidth() {
return document.body.scrollWidht;
}

The scrollHeight and scrollWidth (click to view), they describe the potential width and height of the element in detail, not just the currently seen size. .
Next we need to get the position of the scroll bar, in other words, the distance from the top of the page relative to the viewport.

Copy code The code is as follows:

//The function that determines the horizontal scrolling position of the browser
function scrollX () {
//A shortcut, used in strict mode of IE6/7
var de = document.documentElement;
//If the pageXOffset attribute exists in the browser, use it
return self.pageXOffset ||
//Otherwise, try to get the left scroll offset of the root node
(de && de.scrollLeft) ||
//Finally, try to get the left scroll offset of the body element Amount
document.body.scrollLeft;
}

//Function to determine the vertical scrolling position of the browser
function scrollY() {
//A shortcut, used in IE6 /7 in strict mode
var de = document.documentElement;
//If the pageYOffset attribute exists in the browser, use it
return self.pageYOffset ||
//Otherwise, try to get the root The top scroll offset of the node
(de && de.scrollTop) ||
//Finally, try to get the top scroll 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 exists as a property of the window object. It takes two parameters, namely x and y offsets. Scroll to the specified position of the viewport, two examples

Copy code The code is as follows:

//If scrolling is required To the top of the browser, you can do this
window.scrollTo(0,0)

//If you need to scroll to the specified element, you can do this
window.scrollTo(0, pageY(document .getElementById('content')));

If you are not familiar with the pageY function, you can review it and use it to obtain the position of the element in the entire document. Give it again and let Consolidate it yourself

Copy the code The code is as follows:

//Get the Y position of the element
function pageY(elem) {
//Check if we are at the root element
return elem.offsetParent?
//If we can continue to get the previous element, increase the current offset and continue to recurse upwards
elem.offsetTop pageY(elem.offsetParent):
// Otherwise, get the current offset
elem.offsetTop;
}

Let’s learn how next Obtain the size of the viewport (viewport). Obtaining the size of the viewport can provide insight into how much content the user can currently see.

Copy code The code is as follows:

//뷰포트 높이 가져오기
function windowHeight() {
//IE6/7의 엄격 모드에서 사용되는 단축키
var de = document.documentElement
/ / 브라우저에 innerHeight 속성이 있으면 이를 사용하세요.
return self.innerHeight ||그렇지 않으면 루트 노드 높이를 가져오세요.
(de && de.clientHeight) || /마지막으로 본문 요소
document.body.clientHeight
}

//뷰포트 너비 가져오기
function windowWidth() {
//IE6/7의 엄격 모드에서 사용되는 단축키
var de = document.documentElement
//innerWidth 속성이 브라우저에 있으면 이를 사용하세요.
return self.innerWidth || >//그렇지 않으면 루트 노드의 너비를 가져옵니다.
(de && de.clientWidth) ||
//마지막으로 본문 요소의 너비를 가져옵니다.
document.body.clientWidth ;
}



innerHeight

,
clientHeight 등과 같은 속성에 대해 약간의 의문이 있을 수 있습니다. Mozilla 개발자 센터에 매우 명확하게 설명되어 있습니다. 마지막으로 현재 웹 프런트엔드에서도 매우 인기 있는 더 흥미로운 효과에 대해 이야기하겠습니다. 저자는 구체적인 구현을 제공하지 않았지만 좋은 js 라이브러리를 인용했습니다. dom-drag .js에서는 전문가의 소스 코드를 배울 수 있으며, jquery를 비롯한 여러 인기 js 라이브러리도 소개합니다. 자, javascript와 css에 대한 리뷰입니다. 궁금한 점이 있으면 토론을 위해 메시지를 남겨주세요.