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에서 스크롤 막기, 움직이는 엘리먼트)
Comments