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

用例： - 如果用户正在滚动内部div，则在内部div末端达到时不应滚动外部div。无法停止内部div的结束时外部div的滚动

如果内部div已经达到最后，下面的代码可以很好地工作。即touchstart/touchmove事件在内部div达到结束之后触发。

但是，如果我不解除触摸并保持滚动，并且如果在此过程中内部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。

在此先感谢。

来源

2013-08-21 Sashwat

这在我看来是一个坏主意。您试图编写属于Web浏览器本身的代码，以便在您的网站上以与其他网站上的工作方式不一致的方式更改浏览器的用户界面，方法是禁用用户可能需要的功能。 –

对不起，如果我没有说清楚我的观点。其实我试图给一个功能，用户可以滚动div和独立滚动内部div应该永远不滚动外部div。考虑一种情况，即用户在内部div中快速滚动，一旦内部div到达结束页面就会导致页面滚动，然后用户必须再次滚动页面以使内部div进入可见视图。这不是一个糟糕的用户体验吗？ – Sashwat

Mozilla似乎同意你的观点，因为Firefox不会在任何平台上执行此操作，无论是在桌面上（使用滚轮）还是在移动设备上（使用手指）。苹果似乎不同意你的看法。我认为这可能是决定所属的地方，并试图使其在不同网站上以不同的方式工作，这本身就是糟糕的用户体验。 –

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

来源

2013-08-27 22:18:20

滚动基本上在object/div已经滚动后调用。这是一篇参考文章。 http://tjvantoll.com/2012/08/19/onscroll-event-issues-on-mobile-browsers/ – Sashwat

我恐怕没有时间写的显式代码来解决这个问题，但我要告诉你一个概念性的解决方案，还可以帮助您。

在DOM准备就绪的情况下，使用position: relative包装每个overflow：scroll元素。
在触摸开始，对于overflow: scroll每个祖先，设置overflow: visible，position: absolute，得到计算的高度&宽度和应用这些作为内嵌样式，并设置顶部是scrollTop的负 - 并设置包装的overflow到hidden：这意味着它将处于与第一位相同的位置，但无法通过滚动。
在触摸结束，删除步骤应用的样式2.

我已经可以看到警告：

如果您使用相对或绝对定位为您溢出内布局：滚动元素（而且它们本身没有相对或绝对的定位），这会与你的布局紧密相关。
如果任何滚动元素在DOM准备完成后被包装，则需要为每个元素应用一个包装。

...但它肯定是可行的......

来源

2013-09-02 16:56:31 Barney

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

回答

相关问题