Bindung an das Scrollrad wenn über ein Div

Ich bin momentan dabei, ein Bild-editor im browser und ich habe den code für alle meine Kontrollen durchgeführt. Jetzt würde ich gerne anzeigen hot keys und Maus-Tasten. Die Tastatur ist einfach, aber die Maus nicht.

Brauche ich, um zu erkennen, wenn die Maus über dem canvas-Bereich div und wenn das Mausrad bewegt wird. Mit der Maus über ein Teil ist nicht schwer, seine Bindung an die Maus-Rad, das ich Probleme habe mit.

Versuchte ich jQuery.scroll aber, dass nur die Nähte zu arbeiten, wenn die div unter das Rad gesetzt, um zu Blättern selbst. Meine canvas ist nicht. Es ist offset-gesteuert wird über meine Skripte.

Dinge zu beachten:

  • Ich verwende jQuery als meine Basis.
  • Ich bin nicht acually scrollen nichts, ich bin versucht zu binden, und das Ereignis scroll-Rad, ohne tatsächlich zu scrollen.

Struktur

<div id="pageWrap">
    [page head stuff...]
    <div id="canvas">
        [the guts of the canvas go here; lots of various stuff...]
    <div>
    [page body and footer stuff...]
</div>

InformationsquelleAutor der Frage Robert Hurst | 2010-09-15

  1. 15

    Wichtiges Update 01/2015 - mousewheel-event deprecated:

    In der Zwischenzeit die Mausrad Veranstaltung ist veraltet und wird ersetzt durch Rad.

    MDN Docs für Mausrad sagen:

    Nicht mit diesem Rad-event.

    Diese Schnittstelle ist nicht-standard und veraltet. Es wurde in nicht-Gecko-Browser. Verwenden Sie stattdessen die standard-Rad-event.


    Jetzt sollten Sie etwas verwenden wie:

    //This function checks if the specified event is supported by the browser.
//Source: http://perfectionkills.com/detecting-event-support-without-browser-sniffing/
function isEventSupported(eventName) {
    var el = document.createElement('div');
    eventName = 'on' + eventName;
    var isSupported = (eventName in el);
    if (!isSupported) {
        el.setAttribute(eventName, 'return;');
        isSupported = typeof el[eventName] == 'function';
    }
    el = null;
    return isSupported;
}

$(document).ready(function() {
    //Check which wheel event is supported. Don't use both as it would fire each event 
    //in browsers where both events are supported.
    var wheelEvent = isEventSupported('mousewheel') ? 'mousewheel' : 'wheel';

    //Now bind the event to the desired element
    $('#foo').on(wheelEvent, function(e) {
        var oEvent = e.originalEvent,
            delta  = oEvent.deltaY || oEvent.wheelDelta;

        //deltaY for wheel event
        //wheelData for mousewheel event

        if (delta > 0) {
            //Scrolled up
        } else {
            //Scrolled down
        }
    });
});

    P. S.

    Für die Kommentar von Connell Watkins - "erklären Sie die division durch 120?",

    es gibt einige details, die auf MSDN:

    Das onmousewheel-Ereignis ist das einzige Ereignis, das macht die wheelDelta Eigenschaft. Diese Eigenschaft gibt die Entfernung, die die Schaltfläche mit dem Rad gedreht hat, ausgedrückt in vielfachen von 120. Ein positiver Wert zeigt an, dass Sie das Rad gedrückt, gedreht wurde vom Benutzer entfernt ist. Ein negativer Wert zeigt an, dass die Schaltfläche mit dem Rad gedreht hat gegen den Nutzer.

    Ließ ich die delta /120 Teil meiner Methode, da es keine Vorteile IMO. Das scrollen nach oben ist delta > 0 und unten delta < 0. Einfach.

    InformationsquelleAutor der Antwort Markus Hofmann

  2. 28

    Eine sehr einfache Implementierung würde so Aussehen:

    $(document).ready(function(){
    $('#foo').bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta/120 > 0) {
            $(this).text('scrolling up !');
        }
        else{
            $(this).text('scrolling down !');
        }
    });
});​

    http://www.jsfiddle.net/5t2MN/5/

    InformationsquelleAutor der Antwort jAndy

  3. 3

    Haben Sie versucht, das mousewheel plugin?

    http://www.ogonek.net/mousewheel/jquery-demo.html

    InformationsquelleAutor der Antwort mamoo

  4. 2

    Ein einfaches Beispiel für bind-Mausrad mit jquery....

    <!DOCTYPE html>
<html>
<head>
<title>Mouse Wheel</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<style type='text/css'>
body { text-align: center; }
#res
{
    margin-top: 200px;
    font-size: 128px;
    font-weight: bold;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
    var num = 0;
    $(document).bind('mousewheel',function(e){
        if (e.wheelDelta == "120")
        {
            $("#res").text(++num);
        }
        else
        {
            $("#res").text(--num);
        }
    });
});
</script>
</head>
<body>
<div id="res">0</div>
</body>
</html>

    InformationsquelleAutor der Antwort Chandra Nakka

Schreibe einen Kommentar