CSS, Tailwind
[JSICODE] pageX 와 clientX 의 차이 CSS
JSICODE
2024. 7. 2. 18:28
client : 뷰포트 내에서 의 x,y 좌표
page : 전체 페이지 에서의 x,y 좌표
예시코드
import React from "react";
import './App.css'
export default function App() {
const onClickBtn = (e) => {
console.log('client:',e.clientX, e.clientY);
console.log('page:',e.pageX, e.pageY);
}
return (
<>
<button
style={{height:'300px'}}
onClick={(e)=>{onClickBtn(e)}}>클릭한 위치</button>
<div className="page">dd</div>
</>
);
}
오른쪽 아래 모서리를 클릭했을 때 좌표 차이를 보자.
스크롤이 맨위에 있을 때
스크롤이 아래로 내려 갔을 때
스크롤이 위에있던 아래에있던 정확한 좌표를 원한다면 page를 쓰는게 맞다.