iOS上拉边界下拉白色空白问题解决概述
表现
手指按住屏幕下拉,屏幕顶部会多出一块白色区域。手指按住屏幕上拉,底部多出一块白色区域。
产生原因
在 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. 滚动妥协填充空白,装饰成其他功能
在很多时候,我们可以不去解决这个问题,换一直思路。
根据场景,我们可以将下拉作为一个功能性的操作。
iOS上拉边界下拉白色空白问题解决概述的更多相关文章
- ios 上拉载入下拉刷新Dome
为练手写了一个小的上拉载入很多其它下拉刷新的小的Dome . 没有太多的技术含量,仅仅是作为新手的启示用.是上一篇下拉载入的扩展.先看一下那个再看这个就easy非常多. Dome下载:http://d ...
- Flutter学习笔记(25)--ListView实现上拉刷新下拉加载
如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...
- 微信小程序实现上拉和下拉加载更多
在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更 ...
- Arduino 极速入门系列 - 光控灯(2) - 关于开关,上拉、下拉电阻那些事
接上篇,这次继续讲解光控灯的另外两个组成部分 - 开关和光敏电阻,光控灯里面将会有自锁开关按钮和光敏电阻.这此主要给新玩电子的朋友解释一下开关按钮的做法. 开关按钮的引脚电平读取问题 - 新手专用 我 ...
- 使用iScroll实现上拉或者下拉刷新
上拉或者下拉刷新的需求在移动端是非常常见的需求,大部分情况下,实现这个效果都使用网上现有的解决方案,例如有人使用swiper这个插件, 也有人使用iScroll这个滚动插件.本文的示例是利用iscro ...
- html5+css3实现上拉和下拉刷新
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- iOS 点击cell下拉
iOS 点击cell下拉 代码如下: #import "ViewController.h" @interface ViewController ()<UITableView ...
- jQuery模拟原生态App上拉刷新下拉加载
jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...
- ListView装上拉电阻下拉刷新
主要用到了这个几个文件.MainActivity是界面的Activity,MyAdapter是ListView的自己定义适配,MyListView是自己定义带头部LIistView,假设仅仅须要上拉载 ...
- ios学习--iphone 实现下拉菜单
原文地址:ios学习--iphone 实现下拉菜单作者:sdglyuan00 #import @interface DropDown1 : UIView <</span>UITabl ...
随机推荐
- Linux 安装宋体字体的简单办法
1. 今天同事说测试环境(CentOS) 打印有异常,无法将汉字正常打印出来. 2. 开发同事提供的思路是安装上宋体的字体再进行尝试,并且给出了一个解决方案的地址: https://blog.csdn ...
- Linux查看登录用户记录信息
Linux查看登录用户记录信息 登录成功的信息 last 可以简单统计一下: last |awk '{print $3}' |sort |uniq -c |sort -k1nr 登录失败的 就是 la ...
- Leetcode 98题验证二叉搜索树(Validate Binary Search Tree) Java语言求解
题目链接 https://leetcode-cn.com/problems/validate-binary-search-tree/ 题目内容 给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设 ...
- Linux线程间交互
前言 上一篇说过,系统会为线程mmap一块内存,每个线程有自己的私有栈,使用局部变量没啥问题.但是实际场景中不可避免的需要线程之间共享数据,这就需要确保每个线程看到的数据是一样的,如果大家都只需要读这 ...
- 深度学习基础入门篇[六(1)]:模型调优:注意力机制[多头注意力、自注意力],正则化【L1、L2,Dropout,Drop Connect】等
深度学习基础入门篇[六(1)]:模型调优:注意力机制[多头注意力.自注意力],正则化[L1.L2,Dropout,Drop Connect]等 1.注意力机制 在深度学习领域,模型往往需要接收和处理大 ...
- C/C++ 常见数组排序算法
本文介绍了几种常见的排序算法的实现,包括冒泡排序.选择排序.插入排序.希尔排序.归并排序和快速排序.冒泡排序通过多次遍历数组,比较并交换相邻元素,逐步将较小元素"浮"到数组顶端,时 ...
- 2.8 PE结构:资源表详细解析
在Windows PE中,资源是指可执行文件中存放的一些固定不变的数据集合,例如图标.对话框.字符串.位图.版本信息等.PE文件中每个资源都会被分配对应的唯一资源ID,以便在运行时能够方便地查找和调用 ...
- Postfix + Extmail 企业邮件服务器搭建
ExtMail套件用于提供从浏览器中登录.使用邮件系统的Web操作界面,而Extman套件用于提供从浏览器中管理邮件系统的Web操作界面.它以GPL版权释出,设计初衷是希望设计一个适应当前高速发展的I ...
- GA算法|遗传算法|SYSU期末课程设计|Python+Matlab实现|超完备代码实现
前言 那么这里博主先安利一下一些干货满满的专栏啦! Linux专栏https://blog.csdn.net/yu_cblog/category_11786077.html?spm=1001.2014 ...
- JuiceFS 新手必知 24 问
JuiceFS 是一个创新性的软件产品,很多初次尝试的小伙伴对产品和用法感到很多疑惑,所以为了帮助大家快速理解并上手 JuiceFS,我们整理了24个关于 JuiceFS 经典的问题答案,相信经过这 ...