empêcher la fenêtre de défiler après le défilement de la boîte div

Question

J'ai une petite boîte div qui a une barre de défilement verticale et se trouve dans une page html qui a également une barre de défilement verticale. Mon problème est lorsque l'utilisateur atteint la fin du petit défilement de la boîte DIV, la page html ENTIRE qui contient la boîte div commence alors à défiler (en supposant que l'utilisateur défile via le défilement de la souris et PAS en cliquant réellement sur DIV boîte boutons de défilement eux-mêmes)

est-il un moyen d'éviter toute la page html de défilement une fois qu'un utilisateur atteint en fin de mon petit rouleau de boîte DIV? Toute aide serait très appréciée! Je vous remercie!

Je l'ai essayé (mais il annule le défilement même pour la zone div):

if (window.addEventListener) 
    /** DOMMouseScroll is for mozilla. */ 
    window.addEventListener('DOMMouseScroll', handleWheelEvent, false); 
/** IE/Opera. */ 
window.onmousewheel = document.onmousewheel = handleWheelEvent; 

function handleWheelEvent(e){ 
    e.preventDefault(); 
} 

Answer 1

Je ne regardais pas trop dans votre code et le problème, mais je voulais jeter une suggestion avant de passer: P.

window.addEventListener

et

document.onmousewheel = handleWheelEvent;

sont normalement de bons moyens d'appliquer ce que vous voulez faire le document ENTIER, alors que si vous voulez appliquer une valeur spécifique (dans ce cas scroll = false) à un élément spécifique, alors vous devez définir la référence à cette référence spécifique (ie getElementById(), puis s'applique uniquement à l'élément du document). Idk - peut-être que cela aide, peut-être pas: P bonne chance.

-J

Answer 2

vous devez modifier la fonction handleWheelEvent et vérifier la propriété srcElement de l'événement e et appeler preventDefault() quand ce n'est pas faire défiler la boîte DIV. Voici un lien avec quelques exemples de code:

http://www.webdeveloper.com/forum/archive/index.php/t-158824.html

Answer 3

J'ai eu un problème similaire. Google m'a conduit ici. Plus de 1700 vues, en 4 ans, d'une réponse incomplète. Je me suis dit qu'une fois que j'aurais codé une solution, je la mettrais dans un JSFiddle et je la partagerais. Mieux vaut tard que jamais.

Testé sur MacOSX/Chrome.

http://jsfiddle.net/mF8Pr/

Mon problème impliqué pouvoir faire défiler l'intérieur d'une zone de texte, dans une visionneuse, et la désactivation de défilement sur le reste de la page sous la superposition.

1. bind événement molette de la souris pour documenter
2. lorsque les feux de l'événement (en option: test pour faire overlay vous est visible) cible de contrôle
3. est obj que nous voulons avoir le défilement permis
4. assurez-vous que 0 < obj .scrollTop < (obj.scrollHeight - obj.clientHeight)
5. vérifier la direction de event.originalEvent de défilement tenté.deltaY
   
   • UP == négatif
   • BAS == positif

6. event.preventDefault()

   $(document).bind('mousewheel', function(e){ 
       //if($overlay.is(':visible')) 
       { 
       if(e.target != null && e.target.type != 'textarea') 
       { 
        e.preventDefault(); 
       } 
       else 
       { 
        if(e.originalEvent.deltaY < 0 && e.target.scrollTop == 0) 
        { 
        e.preventDefault(); // already at top 
        } 
        else if(e.originalEvent.deltaY > 0 && e.target.scrollTop >= 
         (e.target.scrollHeight - e.target.clientHeight)) 
        { 
        // must use greater than because sometimes 
        // the math is wrong by 1px   
        e.preventDefault(); // already at bottom 
        } 
       } 
       } 
   }); 
   

-Amanda