728x90 자바스크립트 좌표3 [FrontEnd / Javascript] 스크롤 이동 ScrollBy ScrollTo [프론트엔드 / 자바스크립트] 스크롤 이동하기 window.ScrollBy window.ScrollTo 현재 좌표를 기준으로 전달된 좌표만큼 이동하고 싶다면 window.scrollBy(x,y) 전달된 좌표로 이동 하고 싶다면 window.scrollTo(x,y) 기본 형태 //현재 좌표값 + 전달된 좌표값 window.scrollBy(x,y) //전달된 좌표값으로 이동 window.scrollTo(x,y) 샘플 예제 500px 지점 출력 결과 2021. 5. 21. [프론트 엔드 / 자바스크립트] 좌표 값 구하기 (e.pageX / Y , e.clientX / Y ) [Front-end / Javascript] 프론트엔드 자바스크립트로 좌표 값 구하기 브라우저에서 좌표값은 크게 두가지 종류로 나뉘는데 첫번째는 "전체 스크롤 기준" 으로 구할 수 있고 두번째는 "현재 창 기준"으로 구할수 있다 기본 형태 //브라우저 전체 (스크롤 전체) 기준 좌표 값 event.pageX : 스크롤 전체 기준 X 좌표 값 event.pageY : 스크롤 전체 기준 Y 좌표 값 //현재 창 기준 좌표 값 event.clientX : 현재 창 기준 X 좌표 값 event.clientY : 현재 창 기준 Y 좌표 값 아래 예제는 클릭했을때 현재 포인터가 위치한 좌표를 구하는 예제이다 샘플 예제 출력 결과 2021. 5. 21. [프론트엔드 / 자바스크립트] 브라우저 엘리먼트 좌표 값 구하기 elem.getBoundingClientRect() [Front-End / Javascript] 브라우저 엘리먼트 좌표 값 구하기 기본 형태 elem.getBoundingClientRect(); 객체 구조 elem.getBoundingClientRect().x : 현재 창기준 x좌표 elem.getBoundingClientRect().y : 현재 창기준 y좌표 elem.getBoundingClientRect().width : 엘리먼트 가로 elem.getBoundingClientRect().height : 엘리먼트 세로 elem.getBoundingClientRect().top : 현재 창기준 세로 시작점 부터 엘리먼트 윗변 까지의 거리 elem.getBoundingClientRect().left : 현재 창기준 가로 시작점 부터 엘리먼트 왼쪽변 까지의 .. 2021. 5. 20. 이전 1 다음 728x90
