9

用例： - 如果用户正在滚动内部 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。

提前致谢。

4

2 回答 2

1

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

  1. 在 DOM 准备好后，用position: relative.
  2. overflow: scroll在触摸开始时，对于每个具有, set overflow: visible,的祖先position: absolute，计算高度和宽度并将它们应用为内联样式，并将 top 设置为 scrollTop 的负数 - 并将包装器设置overflow为hidden: 这意味着它将位于相同的位置排在第一位，但无法通过滚动移动。
  3. 在触摸结束时，删除在步骤 2 中应用的样式。

我已经可以看到警告：

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

……但这绝对是可行的……</p>

于 2013-09-02T16:56:31.907 回答
0

If you're using JQuery I would use something that uses scrollTop() to check to see if the user has reached the bottom of the scrollable div and if so, maybe trigger an event that cancels out their scrolling any further? Or something that you may want to do.

Something along the lines of: 

$(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-27T22:18:20.923 回答