Comment empêcher le défilement de la page lors du défilement d'un élément DIV?

J'ai revu et testé les différentes fonctions pour empêcher le corps de faire défiler à l'intérieur d'un div et j'ai combiné une fonction qui devrait fonctionner.

$('.scrollable').mouseenter(function() {
    $('body').bind('mousewheel DOMMouseScroll', function() {
        return false;
    });
    $(this).bind('mousewheel DOMMouseScroll', function() {
        return true;
    });
});
$('.scrollable').mouseleave(function() {
    $('body').bind('mousewheel DOMMouseScroll', function() {
        return true;
    });
});

• Cela arrête tout défilement là où je veux que le défilement soit toujours possible à l'intérieur du conteneur
• Cela ne se désactive pas non plus en cas d'absence de la souris

Des idées, ou de meilleures façons de faire cela?

Mise à jour 2: Ma solution est basée sur la désactivation totale du défilement natif du navigateur (lorsque le curseur est à l'intérieur du DIV) puis sur le défilement manuel du DIV avec JavaScript (en définissant sa .scrollToppropriété). Une approche alternative et meilleure de l'OMI serait de désactiver uniquement sélectivement le défilement du navigateur afin d'empêcher le défilement de la page, mais pas le défilement DIV. Découvrez la réponse de Rudie ci-dessous qui illustre cette solution.

Voici:

$( '.scrollable' ).on( 'mousewheel DOMMouseScroll', function ( e ) {
    var e0 = e.originalEvent,
        delta = e0.wheelDelta || -e0.detail;

    this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
    e.preventDefault();
});

Démo en direct: https://jsbin.com/howojuq/edit?js,output

Ainsi, vous définissez manuellement la position de défilement, puis vous évitez simplement le comportement par défaut (qui serait de faire défiler la DIV ou la page Web entière).

Mise à jour 1: Comme Chris l'a noté dans les commentaires ci-dessous, dans les versions plus récentes de jQuery, les informations delta sont imbriquées dans l' .originalEventobjet, c'est-à-dire que jQuery ne les expose plus dans son objet Event personnalisé et nous devons les récupérer à partir de l'objet Event natif à la place .

Si vous ne vous souciez pas de la compatibilité avec les anciennes versions d'IE (<8), vous pouvez créer un plugin jQuery personnalisé, puis l'appeler sur l'élément débordant.

Cette solution a un avantage par rapport à celle proposée par Šime Vidas, car elle n'écrase pas le comportement de défilement - elle le bloque simplement le cas échéant.

$.fn.isolatedScroll = function() {
    this.bind('mousewheel DOMMouseScroll', function (e) {
        var delta = e.wheelDelta || (e.originalEvent && e.originalEvent.wheelDelta) || -e.detail,
            bottomOverflow = this.scrollTop + $(this).outerHeight() - this.scrollHeight >= 0,
            topOverflow = this.scrollTop <= 0;

        if ((delta < 0 && bottomOverflow) || (delta > 0 && topOverflow)) {
            e.preventDefault();
        }
    });
    return this;
};

$('.scrollable').isolatedScroll();

Je pense qu'il est parfois possible d'annuler l'événement mousescroll: http://jsfiddle.net/rudiedirkx/F8qSq/show/

$elem.on('wheel', function(e) {
    var d = e.originalEvent.deltaY,
        dir = d < 0 ? 'up' : 'down',
        stop = (dir == 'up' && this.scrollTop == 0) || 
               (dir == 'down' && this.scrollTop == this.scrollHeight-this.offsetHeight);
    stop && e.preventDefault();
});

Dans le gestionnaire d'événements, vous aurez besoin de savoir:

• sens de défilement
  d = e.originalEvent.deltaY, dir = d < 0 ? 'up' : 'down' car un nombre positif signifie défilement vers le bas
• position de défilement
  scrollToppour le haut, scrollHeight - scrollTop - offsetHeightpour le bas

Si vous êtes

• défilement vers le haut, et top = 0, ou
• défilement vers le bas, et bottom = 0,

annuler l'événement: e.preventDefault()(et peut-être même e.stopPropagation()).

Je pense qu'il vaut mieux ne pas remplacer le comportement de défilement du navigateur. Ne l'annulez que le cas échéant.

Ce n'est probablement pas parfaitement xbrowser, mais cela ne peut pas être très difficile. Peut-être que la double direction de défilement de Mac est délicate cependant ...

Utilisez la propriété CSS ci-dessous overscroll-behavior: contain;pour l'élément enfant

voyez si cela vous aide:

démo: jsfiddle

$('#notscroll').bind('mousewheel', function() {
     return false
});

Éditer:

essaye ça:

    $("body").delegate("div.scrollable","mouseover mouseout", function(e){
       if(e.type === "mouseover"){
           $('body').bind('mousewheel',function(){
               return false;
           });
       }else if(e.type === "mouseout"){
           $('body').bind('mousewheel',function(){
               return true;
           });
       }
    });

Une solution moins hacky, à mon avis, est de définir le débordement caché sur le corps lorsque vous passez la souris sur le div à défilement. Cela empêchera le corps de défiler, mais un effet de "saut" indésirable se produira. La solution suivante fonctionne autour de cela:

jQuery(".scrollable")
    .mouseenter(function(e) {
        // get body width now
        var body_width = jQuery("body").width();
        // set overflow hidden on body. this will prevent it scrolling
        jQuery("body").css("overflow", "hidden"); 
        // get new body width. no scrollbar now, so it will be bigger
        var new_body_width = jQuery("body").width();
        // set the difference between new width and old width as padding to prevent jumps                                     
        jQuery("body").css("padding-right", (new_body_width - body_width)+"px");
    })
    .mouseleave(function(e) {
        jQuery("body").css({
            overflow: "auto",
            padding-right: "0px"
        });
    })

Vous pouvez rendre votre code plus intelligent si nécessaire. Par exemple, vous pouvez tester si le corps a déjà un remplissage et si oui, ajouter le nouveau remplissage à cela.

Dans la solution ci-dessus, il y a une petite erreur concernant Firefox. Dans Firefox, l'événement "DOMMouseScroll" n'a pas de propriété e.detail, pour obtenir cette propriété, vous devez écrire 'e.originalEvent.detail' suivant.

Voici une solution de travail pour Firefox:

$.fn.isolatedScroll = function() {
    this.on('mousewheel DOMMouseScroll', function (e) {
        var delta = e.wheelDelta || (e.originalEvent && e.originalEvent.wheelDelta) || -e.originalEvent.detail,
            bottomOverflow = (this.scrollTop + $(this).outerHeight() - this.scrollHeight) >= 0,
            topOverflow = this.scrollTop <= 0;

        if ((delta < 0 && bottomOverflow) || (delta > 0 && topOverflow)) {
            e.preventDefault();
        }
    });
    return this;
};

voici une solution simple sans jQuery qui ne détruit pas le scroll natif du navigateur (c'est: pas de scrolling artificiel / laid):

var scrollable = document.querySelector('.scrollable');

scrollable.addEventListener('wheel', function(event) {
    var deltaY = event.deltaY;
    var contentHeight = scrollable.scrollHeight;
    var visibleHeight = scrollable.offsetHeight;
    var scrollTop = scrollable.scrollTop;

    if (scrollTop === 0 && deltaY < 0)
        event.preventDefault();
    else if (visibleHeight + scrollTop === contentHeight && deltaY > 0)
        event.preventDefault();
});

Démo en direct: http://jsfiddle.net/ibcaliax/bwmzfmq7/4/

Voici ma solution que j'ai utilisée dans les applications.

J'ai désactivé le débordement de corps et placé le html du site Web entier dans les div de conteneurs. Les conteneurs du site Web ont un débordement et l'utilisateur peut donc faire défiler la page comme prévu.

J'ai ensuite créé un div frère (#Prevent) avec un z-index plus élevé qui couvre l'ensemble du site Web. Comme #Prevent a un z-index plus élevé, il chevauche le conteneur du site Web. Lorsque #Prevent est visible, la souris ne survole plus les conteneurs du site Web, le défilement n'est donc pas possible.

Vous pouvez bien sûr placer un autre div, tel que votre modal, avec un z-index supérieur à #Prevent dans le balisage. Cela vous permet de créer des fenêtres pop-up qui ne souffrent pas de problèmes de défilement.

Cette solution est meilleure car elle ne cache pas les barres de défilement (effet de saut). Il ne nécessite pas d'écouteurs d'événements et est facile à mettre en œuvre. Cela fonctionne dans tous les navigateurs, bien qu'avec IE7 et 8, vous devez jouer (dépend de votre code spécifique).

html

<body>
  <div id="YourModal" style="display:none;"></div>
  <div id="Prevent" style="display:none;"></div>
  <div id="WebsiteContainer">
     <div id="Website">
     website goes here...
     </div>
  </div>
</body>

css

body { overflow: hidden; }

#YourModal {
 z-index:200;
 /* modal styles here */
}

#Prevent {
 z-index:100;
 position:absolute;
 left:0px;
 height:100%;
 width:100%;
 background:transparent;
}

#WebsiteContainer {
  z-index:50;
  overflow:auto;
  position: absolute;
  height:100%;
  width:100%;
}
#Website {
  position:relative;
}

jquery / js

function PreventScroll(A) { 
  switch (A) {
    case 'on': $('#Prevent').show(); break;
    case 'off': $('#Prevent').hide(); break;
  }
}

désactiver / activer le défilement

PreventScroll('on'); // prevent scrolling
PreventScroll('off'); // allow scrolling

J'avais besoin d'ajouter cet événement à plusieurs éléments qui pourraient avoir une barre de défilement. Dans les cas où aucune barre de défilement n'était présente, la barre de défilement principale ne fonctionnait pas comme elle le devrait. J'ai donc apporté une petite modification au code @ Šime comme suit:

$( '.scrollable' ).on( 'mousewheel DOMMouseScroll', function ( e ) {
    if($(this).prop('scrollHeight') > $(this).height())
    {
        var e0 = e.originalEvent, delta = e0.wheelDelta || -e0.detail;

        this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
        e.preventDefault();
    }       
});

Désormais, seuls les éléments avec une barre de défilement empêcheront le défilement principal de commencer à s'arrêter.

La version purement javascript de la réponse de Vidas el$est le nœud DOM du plan que vous faites défiler.

function onlyScrollElement(event, el$) {
    var delta = event.wheelDelta || -event.detail;
    el$.scrollTop += (delta < 0 ? 1 : -1) * 10;
    event.preventDefault();
}

Assurez-vous de ne pas attacher même plusieurs fois! Voici un exemple,

var ul$ = document.getElementById('yo-list');
// IE9, Chrome, Safari, Opera
ul$.removeEventListener('mousewheel', onlyScrollElement);
ul$.addEventListener('mousewheel', onlyScrollElement);
// Firefox
ul$.removeEventListener('DOMMouseScroll', onlyScrollElement);
ul$.addEventListener('DOMMouseScroll', onlyScrollElement);

Attention , la fonction doit y avoir une constante, si vous réinitialisez la fonction à chaque fois avant de l'attacher, c'est à dire. var func = function (...)le removeEventListenerne fonctionnera pas.

Vous pouvez le faire sans JavaScript. Vous pouvez définir le style des deux div sur position: fixedet overflow-y: auto. Vous devrez peut-être rendre l'un d'entre eux plus haut que l'autre en définissant son z-index(s'ils se chevauchent).

Voici un exemple de base sur CodePen .

Voici le plugin qui est utile pour empêcher le défilement des parents lors du défilement d'un div spécifique et a un tas d'options avec lesquelles jouer.

Vérifiez le ici:

https://github.com/MohammadYounes/jquery-scrollLock

Usage

Déclenchez le verrouillage du défilement via JavaScript:

$('#target').scrollLock();

Déclenchez le verrouillage du défilement via le balisage:

    <!-- HTML -->
<div data-scrollLock
     data-strict='true'
     data-selector='.child'
     data-animation='{"top":"top locked","bottom":"bottom locked"}'
     data-keyboard='{"tabindex":0}'
     data-unblock='.inner'>
     ...
</div>

<!-- JavaScript -->
<script type="text/javascript">
  $('[data-scrollLock]').scrollLock()
</script>

Voir la démo

il suffit de proposer cela comme solution possible si vous ne pensez pas que l'utilisateur aura une expérience négative du changement évident. J'ai simplement changé la classe de débordement du corps en hidden lorsque la souris était sur le div cible; puis j'ai changé le div du corps en débordement caché lorsque la souris part.

Personnellement, je ne pense pas que cela ait l'air mal, mon code pourrait utiliser toggle pour le rendre plus propre, et il y a des avantages évidents à rendre cet effet possible sans que l'utilisateur en soit conscient. C'est donc probablement la réponse hackish de dernier recours.

//listen mouse on and mouse off for the button
pxMenu.addEventListener("mouseover", toggleA1);
pxOptContainer.addEventListener("mouseout", toggleA2);
//show / hide the pixel option menu
function toggleA1(){
  pxOptContainer.style.display = "flex";
  body.style.overflow = "hidden";
}
function toggleA2(){
  pxOptContainer.style.display = "none";
  body.style.overflow = "hidden scroll";
}