HTML5 페이지에서 마우스 휠 이벤트 사용 방법

이 기사는 마우스 휠 상호 작용으로 html5 웹 페이지를 향상시키는 방법을 탐색하여 표준 페이지 스크롤을 넘어서서 축소와 같은 작업을 가능하게합니다. 핵심 도전은 특히 Firefox가 더 일반적인 이벤트 대신

이벤트를 사용하면 크로스 브라우저 호환성에 있습니다. 이미지를 확대하는 예 : 먼저, html에 이미지를 추가하십시오 : DOMMouseScroll 다음으로, 마우스 휠 이벤트를 처리하기 위해 JavaScript 함수를 추가하십시오 : . mousewheel 마지막으로 브라우저 차이를 설명하는 이벤트 핸들러를 첨부하십시오

이 코드는 마우스 휠 방향에 따라 이미지 너비를 동적으로 조정합니다. 및

함수는 너비가 정의 된 범위 내에 유지되도록합니다 (이 경우 50px ~ 800px). 문은 기본 페이지 스크롤 동작을 방지합니다. 이 접근법은 이전 버전의 Internet Explorer를 포함하여 주요 브라우저에서 작동하지만 Safari의 스크롤 휠 처리는 특정 WebKit 버전에 따라 추가 조정이 필요할 수 있습니다.

자주 묻는 질문 (FAQ) :

다음 FAQ는 JavaScript를 사용하여 마우스 휠 이벤트를 감지하고 처리하는 것에 대한 일반적인 질문을 해결합니다.

<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174067598031395.jpg"  class="lazy" alt="How to Use the Mouse Wheel Event in HTML5 Pages " />

마우스 휠 이벤트 감지 :

현대식 브라우저의 표준

이벤트 사용. 이전 코드는 <<<(즉,) 또는 <🎜 (firefox)을 사용할 수 있지만

function MouseWheelHandler(e) {
  // Cross-browser wheel delta
  var e = window.event || e; // IE support
  var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

  // Adjust image size (adjust min/max as needed)
  var myimage = document.getElementById("myimage");
  myimage.style.width = Math.max(50, Math.min(800, myimage.width + (30 * delta))) + "px";

  return false; // Prevent default scrolling
}

는 최고의 크로스 브라우저 호환성을 제공합니다.

var myimage = document.getElementById("myimage");
if (myimage.addEventListener) {
  myimage.addEventListener("mousewheel", MouseWheelHandler, false);
  myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else {
  myimage.attachEvent("onmousewheel", MouseWheelHandler);
}

vs. Math.max : Math.min return false는 표준 및 선호하는 메소드입니다. 는 레거시이며 신뢰성이 떨어집니다

스크롤 방향 결정 : > 이벤트의 특성은 수직 스크롤 방향을 나타냅니다 (아래의 경우, 아래에 음수). 수평 스크롤 정보를 제공합니다

기본 조치 방지 :

사용을 사용하여 기본 스크롤 동작을 중지하고 사용자 정의 작업을 구현하십시오.

• 수평 스크롤링 :

  를 사용하여 수평 스크롤을 감지합니다 wheel mousewheel 속성 : 이 속성은 DOMMouseScroll 및 wheel (픽셀, 라인 또는 페이지)의 단위를 지정합니다. 일반적으로 0 (픽셀)입니다

모바일 장치 지원 : 마우스 휠 이벤트는 모바일 장치에 직접 적용 할 수 없습니다. 터치 이벤트를 대신 사용해야합니다.

• Firefox 호환성 : Firefox는 표준 wheel 이벤트를 지원합니다 mousewheel jQuery 지원 : jQuery 's wheel 메소드는 이벤트 처리를 단순화합니다

• 마우스 휠 이벤트 시뮬레이션 :

  사용 및 테스트 목적으로 사용하십시오.

위 내용은 HTML5 페이지에서 마우스 휠 이벤트 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!