Correction d'un élément jusqu'à ce que tout soit à l'intérieur

Question

J'ai déjà posé cette question mais je n'ai pas pu la formuler correctement, mais c'est ce que je voudrais réaliser. Lorsque vous faites défiler un site Web d'une seule page, toutes les sections ont une hauteur de 100%. Lorsque j'arrive à une section qui a du contenu à faire défiler vers le bas, je veux désactiver le défilement de toute la page Web jusqu'à ce que le contenu de cette section soit complètement défilé vers le bas. Exemple dans ce violon:

div { 
 
    height: 100vh; 
 
} 
 

 
.blue { 
 
    background: blue; 
 
} 
 

 
.red { 
 
    background: red; 
 
} 
 

 
.white { 
 
    background: white; 
 
} 
 

 
.black { 
 
    background: black; 
 
} 
 

 
div.content-wrapper { 
 
    overflow: auto; 
 
    width: 40%; 
 
}

<div class="red"> 
 

 
</div> 
 
<div class="blue"> 
 

 
</div> 
 
<div class=white> 
 
    <div class="content-wrapper"> 
 
    <div class="content"> 
 
     Test TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest 
 
     TestTest TestTest TestTest TestTest TestTest Test 
 
    </div> 
 
    <div class="content"> 
 
     Test TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest 
 
     TestTest TestTest TestTest TestTest TestTest Test 
 
    </div> 
 
    <div class="content"> 
 
     Test TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest TestTest 
 
     TestTest TestTest TestTest TestTest TestTest Test 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="black"> 
 

 
</div>

Quand nous arrivons à la section blanche, il doit être fixé et nous devrions écouter pour faire défiler l'événement et juste en quelque sorte à traduire ou faire défiler des éléments à l'intérieur (divs test test), quand nous arrivons à la fin - permettre le défilement de la section noire.

Quelqu'un a-t-il eu un problème similaire? Je ne sais pas comment le faire, donc je ne peux pas fournir le code que j'ai essayé. Je travaille dans AngularJS.

Answer 1

Avez-vous trouvé la solution? Sinon, essayez ceci.

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

 
    var scrolled = $(".content-wrapper").scrollTop() + (delta < 0 ? 1 : -1) * 20; 
 
    if (!($(".content-wrapper").scrollTop() == 0 && scrolled < 0) && //check if hit top and still scrolling above 
 
     !($(".content-wrapper")[0].scrollHeight - $(".content-wrapper").scrollTop() <= $(".content-wrapper").outerHeight() && 
 
     scrolled + $(".content-wrapper").outerHeight() > $(".content-wrapper")[0].scrollHeight) //check if scrollbar hit the .white scroll bottom and still scrolling below 
 
    ) { 
 
    $(".content-wrapper").scrollTop(scrolled); 
 
    e.preventDefault(); 
 
    } 
 
});

Answer 2

Vous pouvez essayer:

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

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

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

ou consulter: How to prevent page scrolling when scrolling a DIV element?