우리는 마우스 휠을 사용하여 특정 형태의 숫자의 증가 또는 감소를 달성하거나 스크롤 휠이 버튼의 왼쪽과 오른쪽을 제어하고 위아래로 스크롤을 제어합니다. 이들은 모두 마우스 휠의 JS 이벤트 모니터링을 통해 달성됩니다. 오늘 나는 마우스 휠 이벤트를 듣고 약간 간단한 JS를 소개 할 것입니다.
다른 브라우저의 다른 이벤트
우선, 다른 브라우저마다 스크롤 이벤트가 다릅니다. 주로 두 가지 유형이 있습니다 : Onmousewheel (Firefox가 지원하지 않음) 및 Dommousescroll (Firefox 지원 만 지원). 나는이 두 가지 사건을 여기에서 자세히 설명하지 않을 것입니다. 알고 싶다면 Mousewheel (Mousewheel) 및 Dommousescroll 이벤트를 이동하십시오.
또한 작동 중에 이벤트 청취가 추가되어야하며 코드는 다음과 같습니다. Firefox와 호환, AddEventListener를 사용하여 청취하십시오.
다음과 같이 코드를 복사하십시오 :/*등록 이벤트*/
if (document.addeventListener) {
document.addeventListener ( 'dommousescroll', scrollfunc, false);
} // W3C
Window.onmousewheel = docum
JS 스크롤 휠의 위아래를 결정하기 위해 숫자 값을 반환합니다.
스크롤 휠이 위 또는 아래에 있는지 여부를 결정할 때 브라우저에서 호환성을 고려해야합니다. 이제 Firefox는 5 개의 주요 브라우저 (예 : Opera, Safari, Firefox, Chrome)에서 세부 사항을 사용하며 다른 4 가지 범주는 Wheeldelta를 사용합니다. 두 사람은 값의 관점에서만 일치하지 않으므로 의미가 일관성이 있음을 의미합니다. 세부 사항과 휠 델타는 각각 두 값을 취하며, 세부 사항은 ± 3 만, 휠 델타는 ± 120 만 필요하며, 여기서 양수는 상향으로 표시되고 음수는 하향으로 표시됩니다.
특정 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<label for = "wheeldelta"> 스크롤 값 : </label> (예 :/opera) <입력 유형 = "텍스트"id = "휠 델타"/>
<label for = "detail"> 스크롤 값 : (firefox) </label> <입력 유형 = "text"id = "detail"/>
<script type = "text/javaScript">
var scrollfunc = function (e) {
e = e || Window.event;
var t1 = document.getElementById ( "wheeldelta");
var t2 = document.getElementById ( "세부 사항");
if (e.wheeldelta) {// IE/Opera/Chrome
t1. 값 = e.wheeldelta;
} else if (e.detail) {// firefox
t2. value = e.detail;
}
}
/*등록 이벤트*/
if (document.addeventListener) {
document.addeventListener ( 'dommousescroll', scrollfunc, false);
} // W3C
Window.onmousewheel = docum
</스크립트>
위의 코드를 실행하면 다음을 볼 수 있습니다.
코드 사본은 다음과 같습니다.
비 Firefox 브라우저에서 스크롤 휠 스크롤에 의해 리턴 된 값은 120이고 스크롤 다운으로 반환 된 값은 -120입니다.
Firefox 브라우저에서 스크롤 휠 스크롤에 의해 리턴 된 값은 -3이고 스크롤 다운으로 반환 된 값은 3입니다.
코드 부분은 다음과 같습니다. e.wheeldelta는 비정규 브라우저인지 여부를 결정하고 E.Detail은 Firefox 브라우저입니다.
if (e.wheeldelta) {// IE/Opera/Chrome
t1. 값 = e.wheeldelta;
} else if (e.detail) {// firefox
t2. value = e.detail;
}
PS : JS의 일반적으로 사용되는 이벤트 유형과 기능 기능을 요약하는 JS 이벤트에 대한 온라인 쿼리 도구를 권장합니다.
JavaScript 이벤트 및 기능의 전체 목록 :
http://tools.vevb.com/table/javaScript_event