오식랜드
[javascript] 요소의 좌표값 구하기 본문
반응형
wrapper 안에 box의 좌표값을 구해보자.
상대위치
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.wrapper{
height: 2000px;
margin-top: 100px;
padding-top: 200px;
}
.box{
background-color: rgb(77, 175, 255);
width: 300px;
height: 300px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
</div>
<script>
let box = document.querySelector('.box'), // 요소 선택
console.log(box.getBoundingClientRect())
</script>
</body>
</html>
getBoundingClientRect 객체를 이용하여 출력해보면 box의 정보값을 보여준다
viewport로부터 box의 위치값이 출력된다.
그리고 여기서 우리가 사용할 top값을 scroll 이벤트에서 출력해보면, 스크롤 할 때 마다 위치가 바뀌게 된다.
viewport를 기준으로 잡기 때문에 쭉 스크롤 하여 요소가 화면 보다 더 위로 가게 되면 음수로 출력이 된다.
window.addEventListener('scroll', function(){
console.log(box.getBoundingClientRect().top)
})
절대위치
앞에서 구한 상대위치에 스크롤 된 길이를 더해주면 절대값이 나온다.
window.pageYOffset 을 이용해 스크롤 된 길이를 알 수 있다.
<script>
let box = document.querySelector('.box'); // 요소 선택
window.addEventListener('scroll', function(){
console.log(box.getBoundingClientRect().top) // 상대위치
console.log(box.getBoundingClientRect().top + window.pageYOffset) // 절대위치
});
</script>
이대로 출력해보면 상대위치 값은 스크롤 할 때 마다 바뀌지만 상대좌표는 동일하게 나오는게 확인된다!
반응형
'dev-log > html·css·js' 카테고리의 다른 글
| [javascript] input에 정규식을 이용해 숫자만 입력되게 하기 (0) | 2021.05.17 |
|---|---|
| [javascript] range slider input (0) | 2021.05.13 |
| [javascript] 화면 스크롤 값 구하기 (0) | 2021.05.06 |
| [nuxt / motion] clip을 이용한 슬라이드 (0) | 2021.05.04 |
| [javascript motion] 밑줄 그어지는 모션 (0) | 2021.05.04 |
'dev-log/html·css·js' Related Articles
more
Comments