[JSICODE] pageX 와 clientX 의 차이 CSS

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를 쓰는게 맞다.