• 회원가입
  • 로그인
  • 구글아이디로 로그인

[DOM_Event] JS - deltaX 속성 - 마우스휠 이벤트 시, 가로 스크롤량 (= deltaX속성 = 델타엑스 속성)

목차

  1. deltaX 예제 - 마우스휠 X축 스크롤량
  2. deltaX 정의
  3. deltaX 구문

 

deltaX 예제 - 마우스휠 X축 스크롤량

 

<!DOCTYPE html>

<html>

<body onwheel="homzzang(event)">


<h1>홈짱닷컴</h1>

<p>Homzzang.com</p>


<p id="demo"></p>


<script>

function homzzang(event) {

  var x = event.deltaX;

  document.getElementById("demo").innerHTML = x;  // 0

}

</script>


</body>

</html>

 

결과보기 (결과값: 0)
∵ 회원 님 마우스 비롯 대부분 마우스가 좌우 마우스휠 스크롤 지원 X

 

deltaX 정의

 

마우스휠 X축(=좌우=가로) 스크롤량 반환.

 


 

1.

대부분 마우스기기는 좌우 스크롤 기능 없기 때문에 항상 0 반환.

 

2.

읽기 전용 속성임. (즉, 값 설정 불가)

 

3.

주요 최신 브라우저 모두 지원.

단, Safari 지원 X

 

 

deltaX 구문

 

event.deltaX

 


[반환값]

 

스크롤량 나타내는 Double 자료형의 숫자 반한.

  • 오른쪽으로 스크롤: 양(+)의 숫자 반환.
  • 왼쪽으로 스크롤: 음(-)의 숫자 반환.
  • 스크롤 안 하면: 0 반환.




분류 제목
DOM_Style JS - margin -
DOM_Style JS - marginBottom -
DOM_Style JS - marginLeft -
DOM_Style JS - marginRight -
DOM_Style JS - marginTop -
DOM_Style JS - maxHeight -
DOM_Style JS - maxWidth 속성 - 가로최대너비 (= 가로최대길이)
DOM_Style JS - minHeight -
DOM_Style JS - minWidth -
DOM_Style JS - navDown -
DOM_Style JS - navIndex 속성 - 요소의 탭 순서를 설정/반환 (= navIndex속성 = 네브인덱스속성)
DOM_Style JS - navLeft -
DOM_Style JS - navRight -
DOM_Style JS - navUp -
DOM_Style JS - objectFit 속성 - 컨테이너에 맞게 <img>/<video> 크기 조정 방법 지정 (= ob…
DOM_Style JS - objectPosition -
DOM_Style JS - opacity 속성 - 요소의 불투명도 설정/반환 (= opacity속성 = 오패서티속성)
DOM_Style JS - order 속성 - 플렉스아이템 나열순서 (= 오더속성 = flex item order속성, IE1…
DOM_Style JS - orphans 속성 - 인쇄페이지 하단 표시할 요소의 최소줄수 설정/반환 (= orphans속성 =…
DOM_Style JS - outline -
48/67
목록
찾아주셔서 감사합니다. Since 2012