> 웹 프론트엔드 > JS 튜토리얼 > jQuery에서 마우스 휠 이벤트를 감지하는 방법은 무엇입니까?

jQuery에서 마우스 휠 이벤트를 감지하는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-10-26 06:34:02
원래의
1070명이 탐색했습니다.

How to Detect Mouse Wheel Events in jQuery?

jQuery에서 마우스 휠 이벤트 검색

jQuery는 표준 스크롤 이벤트 외에도 마우스 휠 이벤트를 명시적으로 캡처하는 메커니즘을 제공합니다. 이러한 이벤트는 마우스 휠의 회전 방향에 대한 정확한 정보를 제공합니다.

해결 방법:

jQuery에서 마우스 휠 이벤트를 감지하려면 마우스 휠 이벤트 핸들러. 예는 다음과 같습니다.

<code class="javascript">$(document).ready(function() {
    $('#foo').bind('mousewheel', function(e) {
        if (e.originalEvent.wheelDelta / 120 > 0) {
            console.log('Scrolling Up!');
        } else {
            console.log('Scrolling Down!');
        }
    });
});</code>
로그인 후 복사

이 코드에서는

  • $(document).ready(function() {...})가 다음을 보장합니다. 코드는 문서가 로드될 때 실행됩니다.
  • $('#foo').bind('mousewheel', function(e) {...})마우스휠을 바인딩합니다. ID가 'foo'인 요소에 대한 이벤트 핸들러.
  • e.originalEvent.wheelDelta에는 CSS 픽셀로 측정된 회전량이 포함되어 있습니다.
  • 조건문은 바퀴 회전 방향을 확인합니다.

    • 양수 값은 위로 스크롤을 나타냅니다.
    • 음수 값은 아래로 스크롤을 나타냅니다.
  • console.log()는 디버깅 목적으로 스크롤 방향을 콘솔에 출력합니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿