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

我担心我没有时间编写明确的代码来解决这个问题，但是我有一个概念性的解决方案可以帮助你。

在DOM就绪时，使用position: relative
在触摸开始时，对于overflow: scroll的每个祖先，设置overflow: visible，position: absolute，获取计算出的高度＆amp; width并将它们应用为内联样式，并将top设置为scrollTop的负数 - 并将包装器的overflow设置为hidden：这意味着它将处于与第一个位置相同的位置但是无法通过滚动。
在触控结束时，删除在步骤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?
    }
}

当内部div结束时，无法停止外部div的滚动

2 个答案: