자바스립트로 마우스훨(Mouse Wheel) 다루기

    JS 2008. 5. 24. 02:47

    <HTML>
    <HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    /** This is high-level function.
     * It must react to delta being more/less than zero.
     */
    function handle(delta) {
      var mw = document.getElementById('mousewheel');
            if (delta < 0){
       mw.innerHTML = delta + ' Down';
      } else {
       mw.innerHTML = delta + ' Up';
      }
    }

    /** Event handler for mouse wheel event.
     */
    function wheel(event){
            var delta = 0;
            if (!event) /* For IE. */
                    event = window.event;
            if (event.wheelDelta) { /* IE/Opera. */
                    delta = event.wheelDelta/120;
                    /** In Opera 9, delta differs in sign as compared to IE.
                     */
                    if (window.opera)
                            delta = -delta;
            } else if (event.detail) { /** Mozilla case. */
                    /** In Mozilla, sign of delta is different than in IE.
                     * Also, delta is multiple of 3.
                     */
                    delta = -event.detail/3;
            }
            /** If delta is nonzero, handle it.
             * Basically, delta is now positive if wheel was scrolled up,
             * and negative, if wheel was scrolled down.
             */
            if (delta)
                    handle(delta);
    }

    /** Initialization code.
     * If you use your own event management code, change it as required.
     */
    if (window.addEventListener)
            /** DOMMouseScroll is for mozilla. */
            window.addEventListener('DOMMouseScroll', wheel, false);
    /** IE/Opera. */
    window.onmousewheel = document.onmousewheel = wheel;
    //-->
    </SCRIPT>
    </HEAD>

    <BODY>
    Mouse Wheel : <div id="mousewheel"></div>
    </BODY>
    </HTML>


    사용가능 브라우저

    • Internet Explorer 6
    • Firefox 1.5
    • Opera 9
    • Safari

    참조

    'JS' 관련 글 more
    Posted by 부니기

티스토리툴바