it-swarm.com.de

jQuery deaktivieren Sie den Scroll, wenn Sie mit der Maus über ein absolutes div gehen

Ich versuche, die Maus-Scrollfunktion zu deaktivieren, wenn sich die Maus über dem div befindet - so dass nur das div-Scrollen aktiviert ist - und wenn sich die Maus vom div entfernt, wird das Scrollen zum Fenster erneut angewendet. Das div ist absolut positioniert.

Ich habe diesen Beitrag gesehen Jquery verwenden, um die Mausradfunktion zu deaktivieren, wenn sich der Mauszeiger in einem div befindet? aber es scheint keine Antwort zu geben - daher meine Frage.

Ich gehe davon aus, dass es so wäre (wenn es nur diese Methoden gäbe):

$('#container').hover(function() {
     $(window).scroll().disable();
     $(this).scroll().enable();
}, function() {
     $(window).scroll().enable();
});
48
user398341

Dies war eine beliebte Frage, daher aktualisiere ich, um einen Überblick über die Antworten zu geben, die hier gegeben werden und welche für Sie am besten geeignet sind. Es gibt drei einzigartige Lösungen. Zwei sind von Amos und einer von mir. Jeder arbeitet jedoch anders. 

  1. Amos - Setze overflow:hidden auf den Körper. Das ist einfach und funktioniert super. Die Bildlaufleisten des Hauptfensters blinken jedoch ein und aus.
  2. Amos - Verwenden Sie Javascript, um das Mausrad zu deaktivieren. Das ist großartig, wenn Sie überhaupt kein Mausrad benötigen.
  3. Diese Antwort - Verwenden Sie Javascript, um nur das Element zu scrollen, über dem Sie sich befinden. Dies ist die beste Antwort, wenn Ihr inneres Div einen Bildlauf benötigt, Sie jedoch keine anderen Divs scrollen möchten. Die Beispiel-Geige zeigt dies.

http://jsfiddle.net/eXQf3/371/

Der Code funktioniert wie folgt: 

  • Scroll-Ereignis für das aktuelle Element abrufen
  • Brechen Sie das Scroll-Ereignis ab
  • Nur das aktuelle Element manuell scrollen

$('#abs').bind('mousewheel DOMMouseScroll', function(e) {
    var scrollTo = null;

    if (e.type == 'mousewheel') {
        scrollTo = (e.originalEvent.wheelDelta * -1);
    }
    else if (e.type == 'DOMMouseScroll') {
        scrollTo = 40 * e.originalEvent.detail;
    }

    if (scrollTo) {
        e.preventDefault();
        $(this).scrollTop(scrollTo + $(this).scrollTop());
    }
});​

Änderungsprotokoll:

  • FF-Unterstützung
  • scrollTo null, um das Standardverhalten wiederherzustellen, falls etwas Unvorhergesehenes passiert
  • unterstützung für jQuery 1.7.
91
mrtsherman

Sie können den Bildlauf nicht deaktivieren, es gibt jedoch eine einfache Problemumgehung:

//set the overflow to hidden to make scrollbars disappear
$('#container').hover(function() {
    $("body").css("overflow","hidden");
}, function() {
     $("body").css("overflow","auto");
});

Siehe Demo:http://jsfiddle.net/9Htjw/


UPDATE 

Sie können das Mausrad jedoch deaktivieren.

$('#container').hover(function() {
    $(document).bind('mousewheel DOMMouseScroll',function(){ 
        stopWheel(); 
    });
}, function() {
    $(document).unbind('mousewheel DOMMouseScroll');
});


function stopWheel(e){
    if(!e){ /* IE7, IE8, Chrome, Safari */ 
        e = window.event; 
    }
    if(e.preventDefault) { /* Chrome, Safari, Firefox */ 
        e.preventDefault(); 
    } 
    e.returnValue = false; /* IE7, IE8 */
}

Source:http://solidlystated.com/scripting/javascript-disable-mouse-wheel/

Demo:http://jsfiddle.net/9Htjw/4/

29
amosrivera

mrtsherman: Wenn Sie das Ereignis so binden, funktioniert der Code von amosrivera auch für Firefox

    var elem = document.getElementById ("container");
    if (elem.addEventListener) {    
        elem.addEventListener ("mousewheel", stopWheel, false);
        elem.addEventListener ("DOMMouseScroll", stopWheel, false);
    }
    else {
        if (elem.attachEvent) { 
            elem.attachEvent ("onmousewheel", stopWheel);
        }
    }
3
rocky

@ mrtshermans Antwort hat bei mir fast funktioniert, aber es gab eine bahnbrechende Änderung mit passivem Scrollen in Chrome.

preventScrollingEl = document.getElementById("WHATEVER");
preventScrollingEl.addEventListener('mousewheel', preventScrolling, {passive: false});
preventScrollingEl.addEventListener('DOMMouseScroll', preventScrolling, {passive: false});

function preventScrolling(event) {
  var scrollTo = null;

  if (event.type == 'mousewheel') {
    scrollTo = (event.wheelDelta * -1);
  } else if (event.type == 'DOMMouseScroll') {
    scrollTo = 40 * event.detail;
  }

  if (scrollTo) {
    event.preventDefault();
    $(this).scrollTop(scrollTo + $(this).scrollTop());
  }
}
0
Max Bileschi

Ich habe nicescroll auf meiner Seite verwendet, es hat keine Methode funktioniert. Ich erkannte, dass der Nicescroller das Scroll-Ereignis aufruft, und musste Nicescroll vorübergehend deaktivieren, wenn das Element mit der Maus bewegt wurde.

Lösung: Deaktivieren Sie vorübergehend Nicescroll, wenn Sie ein Element mit der Maus bewegen 

$('body').on('mouseover', '#element', function() {
    $('body, html').css('overflow', 'auto').getNiceScroll().remove();
}).on('mouseout', '#element', function() {
    $('body, html').css('overflow', 'hidden').niceScroll();
});
0
Lasithds

Was ich hier mit meinem Code zu tun versuche, ist:

  • Überprüfen Sie, ob div über oder über dem Mauszeiger bewegt wird

  • Holen Sie sich die Scrollrichtung

  • Vergleichen Sie das ScrollTop mit der Höhe des Containers und verhindern Sie ein weiteres Scrollen, wenn max oder min erreicht ist (bis das Mauszeiger aus ist).

    var hovered_over = false;
    var hovered_control;          
    function onCrtlMouseEnter(crtl) {      //Had same thing used for mutliple controls 
        hovered_over = true;       //could be replaced with $(control).onmouseenter(); etc
        hovered_control = crtl;    //you name it
    }
    function onCrtlMouseLeave(crtl) {
        hovered_over = false;
        hovered_control = null;
    }
    
    $(document).on("mousewheel",function(e)
    {
       if (hovered_over == true) {                            
            var control = $(hovered_control);                 //get control
            var direction = e.originalEvent.wheelDeltaY;      //get direction of scroll
            if (direction < 0) {
                if ((control.scrollHeight - control.clientHeight) == control.scrollTop) {
                    return false;              //reached max downwards scroll... prevent;
                }
            }
            else if (direction > 0) {
                if (control.scrollTop == 0) {
                    return false;              //reached max upwards scroll... prevent;
                }
            }
        }
    });
    

http://jsfiddle.net/Miotonir/4uw0vra5/1/

Wahrscheinlich nicht der sauberste Code und er kann leicht verbessert werden, aber das funktioniert für mich .(control.scrollHeight - control.clientHeight) dieser Teil ist irgendwie fragwürdig für mich, aber Sie sollten die Idee bekommen, wie Sie das Problem trotzdem angehen.

0
MjolTonir