iOS Safari - 如何禁用过度滚动但允许可滚动的div正常滚动？ [英] iOS Safari – How to disable overscroll but allow scrollable divs to scroll normally?

问题描述

我正在使用基于iPad的网络应用，并且需要防止过度滚动，以免它看起来像网页。我目前正在使用它来冻结视口并禁用过度滚动：

I'm working on an iPad-based web app, and need to prevent overscrolling so that it seems less like a web page. I'm currently using this to freeze the viewport and disable overscroll:

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

这可以很好地禁用过度滚动但我的应用程序有几个可滚动的div，并且 上面的代码阻止他们滚动 。

This works great to disable overscroll but my app has several scrollable divs, and the above code prevents them from scrolling.

我的目标只是iOS 5及以上版本，所以我避免使用像iScroll这样的hacky解决方案。相反，我将这个CSS用于我的可滚动div：

I'm targeting iOS 5 and above only so I've avoided hacky solutions like iScroll. Instead I'm using this CSS for my scrollable divs:

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

这没有文档过卷脚本，但不能解决div滚动问题问题。

This works without the document overscroll script, but doesn't solve the div scrolling problem.

如果没有jQuery插件， 有什么方法可以使用过度滚动修复但是免除我的$（ '.scrollable'）div？

Without a jQuery plugin, is there any way to use the overscroll fix but exempt my $('.scrollable') divs?

编辑：

我发现了一些东西一个不错的解决方案：

I found something that's a decent solution:

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

滚动经过div的开头或结尾时，视口仍会移动。我想找到一种方法来禁用它。

The viewport still moves when you scroll past the beginning or end of the div. I'd like to find a way to disable that as well.

推荐答案

当你滚过div的开头或结尾时，这解决了这个问题

This solves the issue when you scroll past the beginning or end of the 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没有时阻止整页滚动，这将不起作用溢出。要阻止它，请使用以下事件处理程序而不是上面的事件处理程序（改编自此问题）：

Note that this won't work if you want to block whole page scrolling when a div does not have overflow. To block that, use the following event handler instead of the one immediately above (adapted from 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. (https://stackoverflow.com/a/15033226/40352)
    if($(this)[0].scrollHeight > $(this).innerHeight()) {
        e.stopPropagation();
    }
});

这篇关于iOS Safari - 如何禁用过度滚动但允许可滚动的div正常滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！