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

提前致谢。

- Keen Sage

---

这让我觉得不是一个好主意。你试图编写属于网络浏览器本身的代码，以在您的网站上以一种与其他网站不一致的方式更改浏览器的用户界面，通过禁用用户可能需要的功能。 - j__m

很抱歉，如果我没有表达清楚。实际上，我正在尝试提供一个功能，使用户可以独立滚动两个div，并且滚动内部div永远不应该滚动外部div。考虑这样一种情况：用户在内部div中进行了快速滚动，当内部div到达末尾时，页面会自动滚动，然后用户必须再次向上滚动页面才能将内部div带入可见视图中。这不是一个糟糕的用户体验吗？ - Keen Sage

Mozilla似乎同意您的观点，因为Firefox在任何平台上都不会这样做，无论是在桌面（使用鼠标滚轮）还是在移动设备上（使用手指）。苹果似乎不同意您的观点。我认为这可能就是决策所在，试图在不同的网站上以不同的方式工作本身就是糟糕的用户体验。 - j__m

Answer 1

很抱歉我没有时间写出解决问题的具体代码，但我可以给你提供一个概念性的解决方案，希望能对你有所帮助。

1. 在DOM准备就绪时，使用带有position: relative属性的包装器来包装每个overflow: scroll元素。
2. 在触摸开始时，对于每个带有overflow: scroll祖先元素，设置overflow: visible、position: absolute，获取计算高度和宽度，并将其应用为内联样式，并将顶部设置为scrollTop的负值，并将包装器的overflow设置为hidden：这意味着它将保持在原来的位置，但无法通过滚动移动。
3. 在触摸结束时，删除步骤2中应用的样式。

我已经看到了一些注意事项：

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

......但这绝对是可行的......

- Barney

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?
    }
}

- Andrew Ice

---

滚动条基本上是在对象/ div 滚动后才被调用的。这是一个参考文章。http://tjvantoll.com/2012/08/19/onscroll-event-issues-on-mobile-browsers/ - Keen Sage