HTML5 웹 페이지에 마우스 휠 이벤트를 추가하면 사용자가 웹 페이지와 상호 작용할 수 있다는 것을 알고 있습니다. HTML5에서 마우스 스크롤 휠은 웹 페이지를 위아래로 미끄러 뜨릴 수있을뿐만 아니라. 실제로, 당신은 또한 이에 의존하여 뷰 플레인의 확대 및 감소와 같은 더 많은 기능을 완료 할 수 있습니다.
실제 데모 효과를 확인하십시오
대부분의 브라우저는 마우스 휠 이벤트를 지원하므로 먼저 마우스 휠 이벤트 방법을 구독 할 수 있습니다. 이벤트가 트리거 될 때마다 휠 델타 (Wheeldelta)라는 속성을 얻을 수 있습니다. 양수 값은 스크롤 휠이 아래로 미끄러 져 나오고 음수 값이 스크롤 휠이 미끄러 져 미끄러 져 있음을 나타냅니다. 값의 절대 값이 클수록 슬라이딩 범위가 커집니다.
불행히도, 마우스 휠 이벤트를 지원하지 않는 브라우저가 여전히 있습니다. 그것은 Firefox입니다. Mozilla는 Dommousescroll이라는 이벤트의 처리를 구현했으며,이 행사는 세부 사항이라는 속성이있는 이벤트라는 이벤트 매개 변수를 전달합니다. 그러나이 세부 속성은 휠 델타와 다르며, 이는 양수 값 만 반환 할 수 있습니다. 즉, 마우스 휠의 값만 아래쪽으로 스크롤하는 것만 주장 할 수 있습니다.
Apple은 Safari 브라우저에서 페이지를 위아래로 미끄러 뜨리기 위해 마우스 스크롤을 비활성화했지만이 기능은 여전히 WebKit 엔진에서 정상적으로 사용되므로 작성된 코드는 문제를 유발하지 않습니다.
마우스 휠 이벤트 처리 방법을 추가하십시오먼저 웹 페이지에 이미지를 추가하고 마우스 휠을 사용하여 나중에이 이미지의 줌을 제어 할 수 있습니다.
XML/HTML 코드 복사 컨텐츠를 클립 보드에 복사합니다