좌표 측정시 자주 사용되는 API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Coordinates</title>
<style>
body {
background-color: black;
}
div {
background-color: blanchedalmond;
width: 250px;
height: 250px;
margin-bottom: 4px;
border-radius: 4px;
}
.special {
background-color: lightsalmon;
}
aside {
position: fixed;
top: 20px;
right: 20px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="special"></div>
<div></div>
<div></div>
<script>
/* getBoundingClientRect() : DOMRect 반환(top,left,right,bottom,width,height) 을 가지고있음*/
/* client X,Y: 보고있는 스크린에서 얼마나 떨어져있는가 */
/* page X,Y: 전체 문서에서 얼마나 떨어져있는가 */
const special = document.querySelector(".special");
special.addEventListener("click", (event) => {
const rect = special.getBoundingClientRect();
console.log(rect);
console.log(`pageXY : ${event.pageX} ${event.pageY}`);
console.log(`clientXY : ${event.clientX} ${event.clientY}`);
});
</script>
스크롤링시에 자주 사용되는 API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Coordinates</title>
<style>
body {
background-color: black;
}
div {
background-color: blanchedalmond;
width: 250px;
height: 250px;
margin-bottom: 4px;
border-radius: 4px;
}
.special {
background-color: lightsalmon;
}
aside {
position: fixed;
top: 20px;
right: 20px;
}
</style>
</head>
<body>
<aside>
<button class="scrollBy">scroll by 100px(y)</button>
<button class="scrollTo">scroll to 100px(y)</button>
<button class="scrollInto">scroll into special</button>
</aside>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="special"></div>
<div></div>
<div></div>
<script>
const scrollBy = document.querySelector(".scrollBy");
scrollBy.addEventListener("click", () => {
// window.scrollBy(0, 100);
window.scrollBy({ top: 100, left: 0, behavior: "smooth" });
});
const scrollTo = document.querySelector(".scrollTo");
scrollTo.addEventListener("click", () => {
// window.scrollTo(0, 100);
window.scrollTo({ top: 100, left: 0, behavior: "smooth" });
});
const special = document.querySelector('.special');
const scrollInto = document.querySelector(".scrollInto");
scrollInto.addEventListener("click", () => {
special.scrollIntoView();
});
</script>
</body>
</html>
