jQuery désactive le rouleau quand la souris sur une div absolue

Question

jQuery désactive le rouleau quand la souris sur une div absolue

j'essaie de désactiver la fonctionnalité de défilement de la souris lorsque la souris tourne au - dessus de la div - de sorte que seul le défilement de la div est activé - et lorsque la souris s'éloigne de la div-le défilement vers la fenêtre est appliqué à nouveau. La div est positionnée absolument.

j'ai vu ce post utiliser jquery pour désactiver la souris molette de défilement de la fonction lorsque le curseur de la souris est à l'intérieur d'un div? mais il ne semble pas fournir une réponse - d'où ma question.

je suppose que ce serait quelque chose comme ceci (si seulement ces méthodes existaient):

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

48

jquery mouseover scroll

demandé sur Community 2011-09-27 19:05:15

5 réponses

score 90 · Answer 1

c'est une question qui a été très populaire, donc je suis en train de la mettre à jour pour donner un aperçu des réponses fournies ici et ce qui pourrait être le mieux pour vous. Il y a trois solutions uniques incluses. Deux sont d'Amos et un de moi-même. Cependant, chacun fonctionne différemment.

Amos overflow:hidden sur le corps. C'est simple et fonctionne très bien. Mais les barres de défilement de la fenêtre principale clignoteront.
Amos - utiliser javascript pour désactiver la souris roue. C'est génial si vous n'avez pas besoin de mousewheel du tout.
cette réponse - Utilisez javascript pour faire défiler seulement l'élément sur lequel vous êtes. C'est la meilleure réponse si votre div interne a besoin de faire défiler, mais vous ne voulez pas que d'autres divs fassent défiler. L'exemple le violon vitrines.

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

le code fonctionne comme suit:

Catch événement de défilement sur l'élément courant
Annuler l'événement scroll
faire défiler Manuellement l'élément courant seulement

$('#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());
    }
});

Changelog:

FF support
scrollTo null check pour revenir au comportement par défaut en cas d'imprévu
support pour jQuery 1.7.

score 27 · Answer 2

Vous ne pouvez pas désactiver le défilement de la fenêtre, il existe une solution simple:

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

voir Démo: http://jsfiddle.net/9Htjw/

mise à jour

vous pouvez désactiver la roue de la souris cependant.

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

score 3 · Answer 3

mrtsherman: si vous liez l'événement comme ceci, le code d'amosrivera fonctionne aussi pour 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);
        }
    }

score 0 · Answer 4

ce que j'essaie de faire ici avec mon code est:

"vérifiez si la div est recouverte ou mouillée au-dessus de
Obtenir le sens de défilement de la

comparer la table de défilement avec la hauteur du contenant et éviter de faire défiler le contenant lorsque le maximum ou le minimum est atteint(jusqu'à ce que le contenant soit mouillé).

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/

probablement pas le code le plus propre et il peut être amélioré facilement, mais cela fonctionne pour moi. (control.scrollHeight - control.clientHeight) cette partie est douteuse pour moi , mais vous devriez avoir l'idée comment aborder le problème de toute façon.

score 0 · Answer 5

j'ai utilisé nicescroll sur ma page aucune méthode n'a fonctionné. J'ai réalisé que le nicescroller appelle l'événement scroll et qu'il a dû désactiver temporairement nicescroll en planant l'élément.

Solution: désactiver Temporairement nicescroll lors du survol d'un élément

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

Las etiquetas más populares

jQuery désactive le rouleau quand la souris sur une div absolue

5 réponses