자바스크립트 마우스 휠 event_javascript 기술

오늘은 인터넷에서 스크롤 휠에 반응하는 함수를 찾아서 다음 클래스에 다시 작성했습니다

코드 복사 코드

function WheelEvent(obj, handler)
{
this.handle = handler
// Firefox와 IE 간의 다른 이벤트
window.addEventListener ? obj.addEventListener("DOMMouseScroll", this.wheel, false) : (obj.onmousewheel = this.wheel);
}
wheelEvent.prototype.wheel = 함수(이벤트)
{
var ev = event || window.event ;
var delta = ev.wheelDelta ? (ev.wheelDelta / 120) : (- ev.detail / 3) // `detail`을 사용하는 Firefox 🎜>eval ('delta ? ' parent .handle '(delta) : null;');
}

사용시에는 eval을 기반으로 동작할 실행 함수를 정의해야 합니다. 위 클래스에서 얻은 값을 제공하고 지정된 웹 페이지 요소에 이벤트를 추가합니다. 예를 들어

코드 복사 코드는 다음과 같습니다.

함수 핸들(delta)
{
document.getElementById('text').scrollTop -= delta * 20;
}
newwheelEvent(document.getElementById('text'), 'handle'); 🎜>위 예제에서 첫 번째 매개변수는 스크롤 휠 이벤트를 추가하는 웹 요소이고, 두 번째 매개변수는 텍스트의 id를 가진 div이고, 두 번째 매개변수는 실행 함수의 이름인 핸들입니다.
핸들 함수는 반드시 하나의 매개변수 델타를 가져야 하며 바퀴가 굴러갈 때 델타는 0보다 크고, 아래로 내려갈 때 델타는 0보다 작습니다. 위 예제에서 핸들 함수의 기능은 스크롤 휠을 사용하여 div에 스크롤 막대 기능을 구현하는 것입니다.