体现

手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。

产生原因

在 iOS 中，手指按住屏幕上下拖动，会触发touchmove事情。这个事情触发的对象是整个webview容器，容器天然会被拖动，剩下的部分会成空白。

处理方案

1. 监听事情制止滑动

移动端触摸事情有三个，分别界说为

  1. touchstart ：手指放在一个DOM元素上。

  2. touchmove ：手指拖曳一个DOM元素。

  3. touchend ：手指从一个DOM元素上移开。

明显咱们需要控制的是touchmove事情，由此我在 W3C 文档中找到了这样一段话

Note that the rate at which the user agent sends touchmove events is implementation-defined, and may depend on hardware capabilities and other implementation details.（注意，用户署理发送touchmove事情的速率是完成界说的，而且或许取决于硬件功用和其他完成细节。）

If the preventDefault method is called on the first touchmove event of an active touch point, it should prevent any default action caused by any touchmove event associated with the same active touch point, such as scrolling.（如果在活动触摸点的第一个touchmove事情上调用preventDefault办法，它应该防止由与同一个活动触摸点相关的任何touchmove事情（如翻滚）引起的任何默认操作。）

touchmove 事情的速度是能够完成界说的，取决于硬件性能和其他完成细节

preventDefault 办法，阻止同一触点上所有默认行为，比如翻滚。

由此咱们找到处理方案，经过监听touchmove，让需要滑动的地方滑动，不需要滑动的地方制止滑动。

值得注意的是咱们要过滤掉具有翻滚容器的元素。

完成如下：

document.body.addEventListener('touchmove', function(e) {
  if (e._isScroller) return;
  // 阻止默认事情
  e.preventDefault();
}, {
  passive: false
});

2. 翻滚退让填充空白，装修成其他功用

在很多时分，咱们能够不去处理这个问题，换一直思路。

依据场景，咱们能够将下拉作为一个功用性的操作。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。