iOS Safari – 如何禁用overscroll但允许可滚动div正常滚动?

我在一个基于iPad的网络应用程序,并需要防止过度滚动,使它看起来不像一个网页。我目前使用这个来冻结视口并禁用overscroll:

document.body.addEventListener('touchmove',function(e){
      e.preventDefault();
  });

这工作伟大的禁用overscroll,但我的应用程序有几个可滚动的div,上述代码阻止他们滚动。

我的目标是iOS 5及以上版本,所以我避免了像iScroll这样的黑客解决方案。相反我使用这个CSS为我的可滚动div:

.scrollable {
    -webkit-overflow-scrolling: touch;
    overflow-y:auto;
}

这工作没有文档overscroll脚本,但不解决div滚动问题。

没有一个jQuery插件,有没有任何方式使用overscroll修复,但豁免我的$(‘。scrollable’)divs?

编辑:

我发现了一个很好的解决方案:

 // Disable overscroll / viewport moving on everything but scrollable divs
 $('body').on('touchmove', function (e) {
         if (!$('.scrollable').has($(e.target)).length) e.preventDefault();
 });

当您滚动到div的开始或结尾时,视口仍会移动。我想找到一种方法来禁用它,以及。

这解决了当您滚动经过div的开始或结束时的问题

var selScrollable = '.scrollable';
// Uses document because document will be topmost level in bubbling
$(document).on('touchmove',function(e){
  e.preventDefault();
});
// Uses body because jQuery on events are called off of the element they are
// added to, so bubbling would not work if we used document instead.
$('body').on('touchstart', selScrollable, function(e) {
  if (e.currentTarget.scrollTop === 0) {
    e.currentTarget.scrollTop = 1;
  } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
    e.currentTarget.scrollTop -= 1;
  }
});
// Stops preventDefault from being called on document if it sees a scrollable div
$('body').on('touchmove', selScrollable, function(e) {
  e.stopPropagation();
});

注意,如果你想在div没有溢出时阻止整个页面滚动,这将不起作用。要阻止它,使用以下事件处理程序,而不是上面的事件处理程序(改编自this question):

$('body').on('touchmove', selScrollable, function(e) {
    // Only block default if internal div contents are large enough to scroll
    // Warning: scrollHeight support is not universal. (http://stackoverflow.com/a/15033226/40352)
    if($(this)[0].scrollHeight > $(this).innerHeight()) {
        e.stopPropagation();
    }
});
http://stackoverflow.com/questions/10238084/ios-safari-how-to-disable-overscroll-but-allow-scrollable-divs-to-scroll-norma

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:iOS Safari – 如何禁用overscroll但允许可滚动div正常滚动?