首页 > 其他分享 >iOS上拉边界下拉白色空白问题解决概述

iOS上拉边界下拉白色空白问题解决概述

时间:2022-11-01 17:00:43浏览次数:67  
标签:手指 preventDefault iOS touchmove 概述 上拉 滑动 事件

表现

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


产生原因

在 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. 滚动妥协填充空白,装饰成其他功能

在很多时候,我们可以不去解决这个问题,换一直思路。

根据场景,我们可以将下拉作为一个功能性的操作

标签:手指,preventDefault,iOS,touchmove,概述,上拉,滑动,事件
From: https://www.cnblogs.com/mysweetAngleBaby/p/16848330.html

相关文章

  • 游戏服务器架构:经典的全服分线模型概述
    全服分线模型一.模型描述由于多进程服务器模型的发展,游戏开发者们首先发现,由于游戏业务的特点,那些需要持久化的数据,一般都是玩家的存档,以及一些游戏本身需要用的,在运行期只......
  • AJAX基础+Axios快速入门+JSON使用+综合案例
    目录1、AJAX1.1概述1.1.1作用1.1.2同步和异步1.2快速入门1.2.1服务端实现1.2.2客户端实现1.3案例1.3.1需求1.3.2分析1.3.2后端实现1.3.3前端实现2、Axios异步......
  • VIVADO IP核:GT高速收发器(概述和IP example)
    这里给出一些我看过的参考文档,相信这些博主的内容已经让您对GT高速收发器有了初步了解https://blog.csdn.net/lum250/article/details/119952822(特别详细的CSDN教程,分析了......
  • DP问题概述
    DP路径问题DP的关键问题在于寻找整个问题当中是否存在(初始状态,转移状态,状态转移方程)等等关键的key,当我们能够寻找到这些key的时候,那么本问题也能够用dp解决。DP关键在......
  • 速记MBR硬盘,BIOS安装的Win7,EFI安装Ubuntu后如何引导双系统
    前言本文没有图,截图不方便,虚拟机复现可以但是不想开本以为折腾实在不行了,用BIOS启动重装一次Ubuntu环境MBR硬盘EFIWin7拓展分区SwapEFIbyUbuntuUbuntu......
  • 【AGC】iOS的applink的回调没反应问题分析
    ​问题背景在iOS平台集成AGCAppLinking是遇到了问题和疑惑。提问如下:使用universallink或者urlschema的applink都能拉起app,但是判断是否applink返回false,applink......
  • charles抓不到ios微信小程序的包的原因!!
    如果其他配置全部都弄好了,能抓到网页和的app的包但是微信小程序抓不到,主要原因:  第二个问题,可能是没有允许应用:更改配置->允许其他应用->找到charles的路径 ......
  • 苹果iOS App上架流程,非iOS开发人员上架教程
     iOS应用上线发布流程一般包含相关证书文件的配置、Xcode的设置、AppStoreConnect填写App的相关信息、ipa包上传、审核结果以及相关邮件回复。相关证书文件的配置与Xco......
  • iOS上架流程
    1准备2申请AppID2.1打开[苹果开发者官网](https://developer.apple.com),点击Account登陆账号。2.2进入ID申请3创建证书请求文件(*.cerSigningRequest文件......
  • Linux下磁盘管理工具:hdparm/iostat/parted/fdiisk/badblocks/smartctl/losetup/sg3_ut
    一、hdparm:    hdparm可以检测,显示与设定IDE,SCSI,SATA,SAS硬盘的硬件参数,    如:hdparm-I/dev/sdc可以获取sdc的硬件信息    hdparm-W0/de......