jquery에서 위아래 스크롤 이벤트를 비활성화하는 방법

jquery에서 위아래 스크롤 이벤트를 비활성화하는 방법: 1. 해당 코드 파일을 엽니다. 2. 스크롤 막대의 높이를 결정합니다. 3. "$(document).bind('mousewheel', function(event, delta)..." 스크롤 휠 이벤트를 비활성화하기만 하면 됩니다.

이 문서의 운영 환경: windows7 시스템, jquery 버전 3.2.1, DELL G3 컴퓨터

에서 위쪽 및 아래쪽 스크롤 이벤트를 비활성화하는 방법 jquery?

jQuery 마우스 휠 이벤트 비활성화 및 활성화

웹 페이지를 처음 열 때 전체 화면을 채우는 비디오여야 합니다. 마우스 휠 이벤트를 비활성화하려면 아래쪽 버튼을 클릭하여 만듭니다. 영상 부분에서 페이지 슬라이드 다운이 있어서 마우스 휠을 비활성화하는 이벤트 방식을 찾아봤습니다

1. 마우스 휠 이벤트 비활성화

$(document).bind('mousewheel', function(event, delta) {return false;});

영상 슬라이드 후 마우스 휠을 이용해 아래로 슬라이드 해야 하므로 마우스 휠을 사용할 수 있도록 이벤트 바인딩을 해제하세요

2. 마우스 휠 이벤트를 활성화하려면 이벤트를 직접 바인딩 해제하세요. 알겠습니다

$(document).unbind('mousewheel');

하지만 마우스 휠을 사용할 수 있게 된 후 위로 스크롤하면 영상으로 돌아갑니다. 이때 영상 부분에서 마우스 휠이나 아래쪽 버튼을 사용할 수 있다는 사실을 발견하면 매우 당황스러울 수 있으므로 영상 부분으로 슬라이드할 때 마우스 휠 이벤트를 비활성화하려면

영상 부분

1. 먼저 미끄러지고 있는지 판단합니다

ps: jQuery가 반쯤 구운 상태이므로 코드에 js 코드와 jquery 코드가 있습니다

window.onscroll = function(){
  p=$(this).scrollTop();
  if(t>p){
    console.log("向上滚动");
  }
  t = p;
};

2. 그런 다음 스크롤 막대가 다음보다 작은지 판단합니다. 페이지의 한 화면 높이를 구하는 함수가 있습니다

// 获取浏览器窗口的可视区域的高度
function getViewPortHeight() {
  return document.documentElement.clientHeight || document.body.clientHeight;
}
window.onscroll = function(){
  p=$(this).scrollTop();
  let height = getViewPortHeight();
  if (p >= height){
    $(document).unbind('mousewheel');
  }
  if(t>p){
    if (p < height) {
        $(document).bind('mousewheel', function(event, delta) {
          return false;
        });
        $('html,body').animate({scrollTop:0},1000);
      }
    }
  }
  t = p;
};

근데 이렇게 하면 문서에 대한 마우스 휠 이벤트가 무한히 비활성화되거나 활성화되므로 슬프네요

3.

에 바인딩되었습니다.

$._data(obj[0],"event")
var objEvt = $._data($(document)[0], 'events');
window.onscroll = function(){
  p=$(this).scrollTop();
  let height = getViewPortHeight();
  if (p >= height){
    $(document).unbind('mousewheel');
    objEvt = $._data($(document)[0], 'events');
  }
  if(t>p){
    if (p < height) {
      if (!objEvt){
        $(document).bind('mousewheel', function(event, delta) {
          return false;
        });
        objEvt = $._data($(document)[0], 'events');
        $('html,body').animate({scrollTop:0},1000);
      }
    }
  }
  t = p;
};

요소가 이벤트에 바인딩된 경우 바인딩되지 않습니다. 또는 요소가 이벤트에 바인딩된 경우 요소 바인딩을 해제하세요.

권장 학습: "jquery 비디오 튜토리얼"

위 내용은 jquery에서 위아래 스크롤 이벤트를 비활성화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!