内部がすべてスクロールされるまで要素を固定

Question

私はこの質問を以前に聞いたことがありますが、私はそれをうまく策定できませんでしたが、これは達成したいことです。 1ページのウェブサイトをスクロールすると、すべてのセクションが100％の高さになります。スクロールするコンテンツがあるセクションに移動すると、そのセクションのコンテンツが完全にスクロールされるまで、Webページ全体をスクロールしないようにしたいと考えています。このフィドルでの例：

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>

私たちは白い部分に到達すると、それが固定されなければならないと私たちはイベントをスクロールし、ちょうど何とか（テストテストのdiv）内の要素を翻訳またはスクロールに耳を傾ける必要があり、私たちが最後に来たら、黒い部分にスクロールすることができます。

誰も同じような問題がありましたか？私はそれを行う方法がわからないので、私が試したコードを提供することはできません。私はAngularJSで働いています。

Answer 1

はあなたが解決策を見つけましたか？そうでない場合は、これを試してください。

$('.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

あなたは試すことができます：

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

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

デモ：https://jsbin.com/howojuq/edit?js,output

または参照してください：How to prevent page scrolling when scrolling a DIV element?