La liaison à la molette de défilement lorsque plus d'un div

Je suis de la création d'un éditeur d'image dans le navigateur et j'ai obtenu le code pour l'ensemble de mes contrôles effectués. Maintenant, je voudrais pour carte touches de raccourci et les boutons de la souris. Le clavier est facile, mais la souris n'est pas.

J'ai besoin de détecter lorsque la souris est sur la toile div et lorsque la molette de la souris est déplacé au-dessus d'elle. La souris sur la partie n'est pas difficile, sa liaison à la molette de la souris que je vais avoir des ennuis avec.

J'ai essayé jQuery.scroll mais que seuls les coutures au travail si l' div en vertu de la roue est mise à défilement lui-même. Mon canvas ne l'est pas. C'est le décalage est contrôlée par l'intermédiaire de mes scripts.

Choses à noter:

  • Je suis à l'aide de jQuery que ma base.
  • Je ne suis pas actuellement de défilement quoi que ce soit, j'essaie de lier et de manifestation de la molette de défilement sans défilement.

Structure

<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 Robert Hurst | 2010-09-15
  1. 15

    Importante mise à Jour 01/2015 - la roulette de la souris événement obsolète:

    En attendant la molette de la souris événement est obsolète et remplacé par roue.

    MDN Docs pour de la molette de la dire:

    Ne pas utiliser cette roue de l'événement.

    Cette interface est non-standard et obsolètes. Il a été utilisé dans la non-Gecko uniquement pour les navigateurs. Au lieu d'utiliser la roue standard de l'événement.


    Maintenant, vous devriez utiliser quelque chose comme:

    //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.

    Pour la commentaire de Connell Watkins - "Pourriez-vous expliquer la division par 120?",

    il y a quelques détails sur MSDN:

    La onmousewheel événement est le seul événement qui expose la wheelDelta de la propriété. Cette propriété indique la distance que le bouton de la roue a tourné, exprimées en multiples de 120. Une valeur positive indique que le bouton de la roue a tourné à l'écart de l'utilisateur. Une valeur négative indique que le bouton de la roue a tourné vers l'utilisateur.

    J'ai laissé de côté le delta /120 partie dans ma méthode car il n'y a aucun avantage de l'OMI. Le défilement est delta > 0 et bas delta < 0. Simple.

    • Très très utile, Merci.
    • Sur Chrome v52 sur Windows, au moins, pour défiler vers le HAUT deltaY est -100 qui casse le code ci-dessus. La suite de mod fonctionne avec Chrome, IE et Firefox: var delta = onEvent.deltaY ? onEvent.deltaY * -1 : onEvent.wheelDelta;
    InformationsquelleAutor Markus Hofmann
  2. 28

    Très facile de mise en œuvre ressemblerait à:

    $(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/

    • ne fonctionne pas sous mozilla 4
    • Pourriez-vous expliquer la division par 120?
    • Je pense qu'il devrait être: e.originalEvent.wheelDelta. Je l'ai testé sur Chrome.
    • Ceux qui cherchent à utiliser jQuery 1.7+ doit utiliser e.originalEvent.wheelDelta comme Esteban a suggéré. Vous pouvez consulter le violon ici: http://jsfiddle.net/KyleMit/25btn/ La raison en est que la manifestation de l'objet jQuery gestionnaire d'événement ne correspond pas à l'soulevées événement. wheelData est un non-événement standard de la propriété qui n'est plus passé dans le jQuery événement, mais elle est toujours disponible à partir de la source d'origine de l'événement qui a déclenché l'appel.
    • Utilisation DOMMouseScroll pour Firefox.
    InformationsquelleAutor jAndy
  3. 3

    Avez-vous essayé la roulette de la souris plugin?

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

    • Ah, a l'air bon. Je me demande si cela est possible sans un plugin bien.
    • jAndy la réponse, c'est parfait...
    InformationsquelleAutor mamoo
  4. 2

    Un exemple simple pour lier la molette de la souris avec 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 Chandra Nakka
  5. 1

    L'e.wheelDelta ne fonctionne pas pour moi.

    Cela a fonctionné:

    JS:

    $(document).ready(function(){
    $('#foo').bind('mousewheel',function(e){
        if (e.originalEvent.wheelDelta == 120){
		//mouse up
        }
        else
        {
		//mouse down
        }
    });
});

    InformationsquelleAutor abelabbesnabi