表現
手指按住螢屏下拉，螢屏頂部會多出一塊白色區域，手指按住螢屏上拉，底部多出一塊白色區域，
產生原因
在 iOS 中，手指按住螢屏上下拖動，會觸發 touchmove 事件，這個事件觸發的物件是整個 webview 容器，容器自然會被拖動，剩下的部分會成空白，
解決方案
1. 監聽事件禁止滑動
移動端觸摸事件有三個，分別定義為
-
touchstart ：手指放在一個DOM元素上，
-
touchmove ：手指拖曳一個DOM元素，
-
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. 滾動妥協填充空白，裝飾成其他功能
在很多時候，我們可以不去解決這個問題，換一直思路，
根據場景，我們可以將下拉作為一個功能性的操作，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/545903.html
標籤：iOS