jquery에서 마우스 휠 스크롤 거리를 얻는 방법-프런트엔드 Q&A-php.cn

웹 개발에서 마우스 휠 이벤트는 매우 일반적이고 중요한 기능입니다. 하지만 jQuery로 개발하다 보면 마우스 휠 스크롤 거리를 구해야 하는 상황이 발생할 수 있습니다. 이 기사에서는 jQuery를 사용하여 마우스 휠 스크롤 거리를 얻는 방법을 살펴보겠습니다.

시작하기 전에 한 가지 분명히 해야 할 점은 마우스 휠 이벤트가 다른 브라우저와 운영 체제에서 정확히 동일하게 동작하지 않는다는 것입니다. 따라서 코드를 작성할 때 호환성 문제를 고려해야 합니다.

먼저 마우스 휠 이벤트의 기본 구문을 살펴보겠습니다.

$(selector).on('mousewheel', function(event) { //执行操作 });

로그인 후 복사

위 코드에서selector는 마우스 휠 이벤트에 바인딩되어야 하는 선택기를 나타내고,mousewheel 는 마우스 휠 이벤트의 이름입니다. 마우스 휠 이벤트가 발생하면 지정된 기능이 실행됩니다. selector表示需要绑定鼠标滚轮事件的选择器，mousewheel是鼠标滚轮事件的名称。当鼠标滚轮事件触发时，会执行指定的函数。


       在执行函数时，需要传入一个event对象，该对象包含了鼠标滚轮事件的一些信息。其中，event.originalEvent属性包含了原始的鼠标滚轮事件对象，可以通过该对象获取滚轮滚动的距离。
       接下来，让我们来看一下如何获取鼠标滚轮的滚动距离。
       方法一：使用event.originalEvent对象
       
        $(selector).on('mousewheel', function(event) { var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; //执行操作 });
        
         로그인 후 복사
        
       
       在上面的代码中，如果当前浏览器支持wheelDelta属性，则获取该属性的值并赋给delta变量。否则，将detail属性的相反数赋给delta变量。detail属性表示鼠标滚轮每次滚动的距离，而wheelDelta属性表示鼠标滚轮滚动的距离。
       需要注意的是，wheelDelta的值可以是正数也可以是负数，而detail的值只能是正数或0。因此，为了兼容各个浏览器和操作系统，需要使用-event.originalEvent.detail来获取滚轮滚动的距离。
       方法二：使用event.originalEvent.deltaY属性
       
        $(selector).on('mousewheel', function(event) { var delta = event.originalEvent.deltaY; //执行操作 });
        
         로그인 후 복사
        
       
       在上面的代码中，直接使用deltaY属性来获取鼠标滚轮滚动的距离。需要注意的是，该属性只在部分浏览器和操作系统下被支持，因此不太可靠。
       综上所述，我们可以使用以上两种方式来获取鼠标滚轮滚动的距离。然而，在实际开发过程中，为了兼容各个浏览器和操作系统，最好将这两种方式都进行考虑，并尽可能地使用更加通用的方式。
       总结一下，获取鼠标滚轮滚动距离的代码如下：
       
        $(selector).on('mousewheel', function(event) { var delta = 0; if (event.originalEvent) { if (event.originalEvent.wheelDelta) { delta = event.originalEvent.wheelDelta / 120; } else if (event.originalEvent.detail) { delta = -event.originalEvent.detail / 3; } else if (event.originalEvent.deltaY) { delta = event.originalEvent.deltaY / 120; } } //执行操作 });
        
         로그인 후 복사
        
       
       在上面的代码中，我们首先初始化了delta变量为0；然后判断event.originalEvent属性是否存在，如果存在则进一步判断wheelDelta、detail和deltaY함수를 실행할 때 마우스 휠 이벤트에 대한 일부 정보가 포함된
       이벤트개체를 전달해야 합니다. 그 중
       event.originalEvent속성에는 마우스 휠 원본 이벤트 객체가 포함되어 있으며 이를 통해 휠이 굴러가는 거리를 얻을 수 있습니다.
       다음으로 마우스 휠의 스크롤 거리를 구하는 방법을 살펴보겠습니다. 방법 1:
       event.originalEvent객체 사용 rrreee위 코드에서 현재 브라우저가
       wheelDelta속성을 지원하는 경우 해당 속성의 값을 가져와 할당합니다.
       delta변수에 저장하세요. 그렇지 않으면
       detail속성의 역을
       delta변수에 할당하세요.
       detail속성은 마우스 휠이 매번 굴리는 거리를 나타내고,
       wheelDelta속성은 마우스 휠이 굴리는 거리를 나타냅니다.
       wheelDelta값은 양수 또는 음수일 수 있지만
       detail값은 양수 또는 0만 될 수 있습니다. 따라서 다양한 브라우저 및 운영체제와 호환되기 위해서는
       -event.originalEvent.detail을 사용하여 휠의 스크롤 거리를 얻어야 합니다. 방법 2:
       event.originalEvent.deltaY속성을 사용하세요. rrreee위 코드에서
       deltaY속성을 직접 사용하여 마우스 휠이 굴러가는 거리를 구합니다. 이 속성은 일부 브라우저 및 운영 체제에서만 지원되므로 신뢰할 수 없습니다. 요약하자면 위의 두 가지 방법을 사용하여 마우스 휠이 굴러가는 거리를 구할 수 있습니다. 그러나 실제 개발 과정에서는 다양한 브라우저 및 운영체제와의 호환성을 위해서는 두 가지 방법을 모두 고려하고, 최대한 일반적인 방법을 사용하는 것이 가장 좋습니다. 요약하면 마우스 휠 굴러가는 거리를 구하는 코드는 다음과 같습니다. rrreee위 코드에서는 먼저
       delta변수를 0으로 초기화한 후
       이벤트를 결정합니다. originalEvent속성이 존재하는지 여부.
       wheelDelta,
       detail및
       deltaY속성이 존재하는지 여부가 추가로 결정됩니다. 존재하는 경우 휠 롤링은 속성 값을 기준으로 계산됩니다. 마지막으로 적절한 조치를 수행하십시오. 이 기사가 독자가 jQuery를 사용하여 마우스 휠 롤링 거리를 얻는 방법을 이해하고 숙달하는 데 도움이 되기를 바랍니다.
       위 내용은 jquery에서 마우스 휠 스크롤 거리를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!