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

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

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

우선 스크롤 바가 없을때는 자바스크립트에서 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

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

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

[윈도우] Windows에서 폴더의 내용을 텍스트 파일로 저장하는 방...

[javascript] select potion 제어 변수들

[리눅스] gzip 압축풀기

[php] 날짜 계산 예제

[엑셀] 셀에 날짜 입력 단축키

[html5] 스마트폰 웹브라우저 상단바 없애는 방법

[html5] datalist 사용법

[Android] android studio 설치 및 셋팅

[MySql] 날짜 비교 검색 (오늘, 어제, 한달전...)

phpMyAdmin 설치 및 오류 해결

MS 엣지 강력한 새로고침

cURL 사용법

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

[엑셀] 셀을 클릭하면 설명 메시지를 팝업 시키는 방법

[Javascript] confirm 클릭 확인받기

[HTML][CSS] 페이지 넘김 및 프린터 출력 여백 설정

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

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

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

CSS3 미디어쿼리 @media 규칙 이해.