CSS 조작 - Window Coordinate(좌표)

// Window 좌표, Window Coordinate

• getBoundingClientRect() : 요소의 크기, 뷰포트에 대한 상대적인 위치
  - top, right, bottom, left, width, height를 포함하는 DOMRect 객체 반환

// top, left
- 왼쪽 상단에서부터의 상대적인 위치

• pageX / pageY : document에 대한 절대 좌표
  - 스크롤 해도 변경 x
• clientX / clientY : 뷰포트에 대한 상대 좌표
  - 스크롤 하면 변경 o

---

 

const circle = document.querySelector('.orange');
circle.addEventListener('click', (e) => {
    console.log(circle.getBoundingClientRect());
    console.log(`client: ${e.clientX}, ${e.clientY}`);
    console.log(`page: ${e.pageX}, ${e.pageY}`);
});

---

// Scroll

- 화면에서 원하는 만큼, 혹은 원하는 곳으로 이동할 수 있게 해준다.

• scrollBy: 지정한 값만큼 이동한다.
  - x축으로 __ 만큼 , y축으로 __만큼
• scrollTo: 지정한  좌표로 이동한다.
  - x 좌표 __  , y좌표 __ 로 
• scrollIntoView: 지정한 요소로 이동한다.
  - Option도 지정 가능하다.

*scrollIntoView의 options

- behavior : 속도, 효과 지정
  ~ smooth, instant, auto(기본)
- block : 수직 정렬
  ~ start(기본), center, end, nearest  
- inline : 수평 정렬
  ~ start, center, end, nearest(기본)

---

const circle = document.querySelector('.orange');
const scrollBy = document.querySelector('.scrollBy');
const scrollTo = document.querySelector('.scrollTo');
const scrollInto = document.querySelector('.scrollInto');

scrollBy.addEventListener('click', function() {
  window.scrollBy(0, 50);
});
scrollTo.addEventListener('click', function() {
  window.scrollTo(0, 50);
});
scrollInto.addEventListener('click', function() {
  circle.scrollIntoView();
});