当内部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.

提前致谢.

Answer 1

如果您使用 JQuery，我会使用一些使用scrollTop() 的东西来检查用户是否已到达可滚动 div 的底部，如果是，可能会触发一个事件来取消其进一步的滚动？或者您可能想做的事情。

大致如下：

$(document).ready(function(){
    $('.scrollableDiv').bind('scroll',scroll_check); 
});

function scroll_check(e){
    var elem = $(e.currentTarget);
    if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()){
      // set overflow-y hidden?
    }
}