到达内部 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

恐怕我没有时间编写显式代码来解决这个问题，但我已经为您提供了一个概念性解决方案，它仍然可能对您有所帮助。

1. 在 DOM 准备好时，用 position: relative 包装每个溢出：滚动元素。
2. 在触摸开始时，对于每个带有overflow: scroll 的祖先，设置overflow: visible、position: absolute，计算出高度和宽度并将它们应用为内联样式，并将top 设置为scrollTop 的负数——并设置包装器的overflow 到 hidden：这意味着它将处于与最初相同的位置，但无法通过滚动移动。
3. 在触摸结束时，删除在第 2 步中应用的样式。

我已经看到了警告：

1. 如果您在溢出中使用相对或绝对定位进行布局：滚动元素（并且它们本身没有相对或绝对定位），这将影响您的布局。
2. 如果任何滚动元素在 DOM 准备就绪后被包裹，您需要为每个元素应用一个包裹器。

……但绝对可行……

Answer 2

如果您使用的是 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?
    }
}