web-dev-qa-db-fra.com

jQuery désactiver le défilement lorsque la souris survole un div absolu

J'essaie de désactiver la fonctionnalité de défilement de la souris de la fenêtre lorsque celle-ci survole la div - pour que seul le défilement div soit 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 molette de la souris lorsque le curseur de la souris est à l'intérieur d'un div? mais cela ne semble pas fournir de 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();
});
jqueryscrollmouseover
48
user398341

Cette question a été très populaire et je suis en train de la mettre à jour pour vous donner un aperçu des réponses fournies ici et de celles qui pourraient vous convenir mieux. Trois solutions uniques sont incluses. Deux viennent d'Amos et un de moi. Cependant, chacun fonctionne différemment. 

  1. Amos - Placez overflow:hidden sur le corps. C'est simple et fonctionne très bien. Mais les barres de défilement de la fenêtre principale vont clignoter.
  2. Amos - Utilisez javascript pour désactiver la molette de la souris. C’est génial si vous n’avez pas besoin de la molette de la souris.
  3. Cette réponse - Utilisez javascript pour faire défiler uniquement l'élément sur lequel vous êtes passé. C'est la meilleure réponse si votre div interne a besoin de faire défiler, mais vous ne voulez pas qu'un autre div défile. L'exemple de violon en est la démonstration.

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

Le code fonctionne comme suit: 

  • Catch event scroll sur l'élément en cours
  • Annuler l'événement de défilement
  • Faire défiler manuellement l'élément actuel uniquement

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

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

mrtsherman: si vous liez l'événement de cette manière, le code de amosrivera fonctionne également 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);
        }
    }
3
rocky

J'ai utilisé nicescroll sur ma page, aucune méthode n'a fonctionné. J'ai réalisé que nicescroller appelle l'événement scroll et j'ai dû désactiver temporairement nicescroll lors du survol de 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();
});
0
Lasithds

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

  • Vérifiez si div est survolé ou survolé

  • Obtenir la direction de défilement

  • Comparez l'objet ScrollTop à la hauteur du conteneur et empêchez le défilement lorsque les valeurs max ou min sont atteintes (jusqu'à ce que moused soit désactivé).

    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/

Ce n'est 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 plutôt discutable pour moi, mais vous devriez avoir une idée de la façon d'aborder le problème.

0
MjolTonir