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

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

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

우선 스크롤 바가 없을때는 자바스크립트에서 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] 스마트폰 웹브라우저 상단바 없애는 방법

[jQuery] 익스플로러 외 날짜 입력박스 사용하기(input type dat...

홈페이지(웹브라우저) 창 가로 세로 확인 방법

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

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

정상 아이디로 로그인 했는데 deleted 로 로그인 되는경우!!!

인터넷 최적화 - 필요없는 레지스트리 삭제

한글 파일은 찾을 수 없다고 할때 (UTF-8)