Firejune

Monnerjahn씨는 마우스의 휠을 Prototype의 Event.observe로 확장코드를 개발하고 공개했습니다. 좌측의 사각형 엘리먼트에 마우스를 올리고 휠을 사용해 보세요.(마우스 오버하는 순간 스크롤바가 비활성화 됩니다.) 이 이벤트를 사용하여 구글맵의 줌인/줌아웃처럼 페이지 스크롤 자체를 자바스크립트로 컨트롤 할 수 있게 되었습니다. 멋진 그림이 그려지지 않으세요?

/*
* Orginal: adomas.org/javascript-mouse-wheel/
* prototype extension by "Frank Monnerjahn" themonnie@gmail.com
*/
Object.extend(event, {
    wheel:function (event){
        var delta = 0;
        if (!event) event = window.event;
        if (event.wheelDelta) {
            delta = event.wheelDelta/120;
            if (window.opera) delta = -delta;
        } else if (event.detail) { delta = -event.detail/3; }
        return Math.round(delta); //Safari Round
    }
});

/*
* end of extension
*/

var counterSite=0;
function handleSite(e) {
    counterSite +=  event.wheel(e);
    $('delta').innerHTML = counterSite +'#'+ event.wheel(e) +
    ": " + (event.wheel(e) <0 ? 'down' : 'up' );
}

var counterDIV=0;
function handleDIV(e) {
    counterDIV +=   event.wheel(e);
    $('divdelta').innerHTML = counterDIV +'#'+ event.wheel(e) +
     ": " + (event.wheel(e) <0 ? 'down' : 'up' );
}

event.observe(document, "mousewheel", handleSite, false);
event.observe(document, "DOMMouseScroll", handleSite, false); // FF

event.observe($('divdelta'), "mousewheel", handleDIV, false);
event.observe($('divdelta'), "DOMMouseScroll", handleDIV, false); // FF

덧. 실습예제가 업데이트 되었습니다.(IE6,7에서 스크롤 막기, 움직이는 엘리먼트)