html - 内側の div の終わりに達したときに、外側の div のスクロールを停止できません

Question

使用例 : - ユーザーが内側の div をスクロールしている場合、内側の div の端に到達したら、外側の div をスクロールしてはなりません。

次のコードは、内側の div が既に最後に達している場合に完全に機能します。つまり、内側の div が最後に到達した後に touchstart/touchmove イベントがトリガーされます。

ただし、タッチを解除せずにスクロールを続け、このプロセスで内側の div の最後に到達すると、外側の div のスクロールが開始されます。

$('body').find('.scrollableDiv').on(
    {
      'touchstart' :  function(e) {
        touchStartEvent = e;
      },
      'touchmove' : function(e) {
        e.stopImmediatePropagation();
        $this = $(this);
        if ((e.originalEvent.touches[0].pageY > touchStartEvent.originalEvent.touches[0].pageY && this.scrollTop == 0) || 
            (e.originalEvent.touches[0].pageY < touchStartEvent.originalEvent.touches[0].pageY && this.scrollTop + this.offsetHeight >= this.scrollHeight)){
          e.preventDefault();
        }
      },  
  }); 

内側の div の最後に到達したらすぐにスクロールを停止するにはどうすればよいですか? Androidデバイスのブラウザでこれを達成しようとしています。この点で誰かが私を助けることができますか?

注 : ユーザーは、外側の div をスクロールできる必要があります。

前もって感謝します。