말풍선 위치 계산 (마우스 포인터 위치계산)

웹프로그램을 제작하다보면 마우스 포인터가 위치하는 곳에 도움말을 제공하는 기능을 만들때가 있습니다.

이때 중요한 것은 마우스 포인터의 위치를 알아내는 것인데, 스크롤바가 없을때는 쉽게 알아낼수 있는데, 스크롤바가 있을때는 각 브라우저마다 알아내는 구문이 달라서 애로를 격습니다.

우선 스크롤 바가 없을때는 자바스크립트에서 event.clientX, event.clientY 해서 X 값과 Y 값을 알수 있습니다.

그렇지만 스크롤바가 생길경우에는 스크롤바가 움직인 거리를 추가적으로 더해줘야 합니다.
그런데 브라우저 마다 구문이 틀려서 저는 다음과 같이 사용합니다.

// 익스플로로, 크롬, 사파리 일때와 그렇지 않을때로 구분
if ( navigator.appName == 'Netscape') {
var scrolltop = document.documentElement.scrollTop;
var clientheight = document.documentElement.clientHeight;
var scrollwidth = document.documentElement.scrollWidth;
var clientwidth = document.documentElement.clientWidth;
} else {
var scrolltop = document.body.scrollTop;
var clientheight = window.innerHeight;;
var scrollwidth = document.body.scrollWidth;
var clientwidth = document.body.clientWidth;
}

scrolltop : 스크롤이 상하로 움직인 거리
scrollwidth : 스크롤이 좌우로 움직인 거리
clientheight : 웹브라우저 내부의 높이
clientwidth : 웹브라우저 내부의 가로

그래서 마우스 포인터의 X 값은 scrollwidth + event.clientX 이고
마우스 포인터의 Y 값은 scrolltop + event.clientY 입니다.

TAG : javascript scrollTop scrollWidth clientHeight clientWidth innerHeight clientX clientY

컴퓨터와 관련있는 모든 팁을 공유합시다.

말풍선 위치 계산 (마우스 포인터 위치계산)

[html5] datalist 사용법

[Javascript] 숫자를 글자로 바꿔주는 자바스크립트

[Javascript] confirm 클릭 확인받기

[javascript] window.open으로 오픈한 자식창에서 부모창 태그 �...

[JavaScript] 스크롤할때 메뉴바 상단에 고정하기

textarea 엔터키 입력할때마다 입력박스 높이를 증가시키는 자바...

javascript encodeURI -> php EUC-KR decode

말풍선 위치 계산 (마우스 포인터 위치계산)

[JavaScript] try catch문 사용방법