ios系统在h5页面下拉上拉会带动整个webview 出现空白

ios系统在h5页面下拉上拉会带动整个webview 出现空白
产生原因
在 iOS 中,手指按住屏幕上下拖动,会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器,容器自然会被拖动,剩下的部分会成空白。

在 W3C 文档中说

touchmove 事件的速度是可以实现定义的,取决于硬件性能和其他实现细节

preventDefault 方法,阻止同一触点上所有默认行为,比如滚动。

解决方案
监听事件禁止滑动,通过监听 touchmove,让需要滑动的地方滑动,不需要滑动的地方禁止滑动。

//这个ios13以上没有效果
document.body.addEventListener('touchmove', function(evt) {
    if(!evt._isScroller) {
        evt.preventDefault();
    }
});
//这个会完全禁止touchmove  导致内部无法滚动。
document.body.addEventListener('touchmove', function (e) {
  if(e._isScroller) return; //过滤掉具有滚动容器的元素。
  e.preventDefault(); 
}, {passive: false}); //passive 参数不能省略
iOS中,当你使用WKWebView(WebKit框架的一部分,用于渲染HTML内容)嵌入H5页面时,有时可能会遇到点击事件无法触发的问题。这通常可能是由于以下几个原因: 1. **WKWebView设置**:确保WKWebView的交互代理(WKNavigationDelegate)已启用并且设置了正确的用户交互处理。需要确保`webView.scrollView.isScrollEnabled = false`以防止滚动遮挡点击。 ```swift let webViewConfiguration = WKWebViewConfiguration() webViewConfiguration.userContentController.add(self, name: "webPageInteractions") ``` 然后在代理方法中处理点击: ```swift func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { if message.name == "webPageInteractions" { handleWKMessage(message.body as! String) } } func handleWKMessage(_ message: Any) { // 处理H5页面传递过来的点击事件 } ``` 2. **JS桥**:如果H5页面使用了JavaScriptBridge(如JSCore、WebViewJavascriptBridge等)来发送消息,确保桥梁已经配置并能正确地将点击事件转发给Swift。 3. **CSS穿透**:检查页面是否有阻止元素获取焦点的样式(比如`pointer-events: none;`),这可能导致点击失效。修复这类问题可能需要调整H5页面的样式。 4. **跨域限制**:如果H5页面位于不同的域下,可能存在同源策略限制点击事件的传播。确保通过CORS或服务端设置允许相应的请求来源。 5. **调试工具**:检查开发者工具中的网络请求,确认H5页面是否正确地发送了交互事件,并查看日志以找出问题。 如果你遇到这个问题,可以尝试排查以上几个方面,若仍有疑问,可以考虑提供具体的代码片段以便更好地定位问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值