关于ios手机上拉和下拉到底部和顶部的橡皮筋问题
之前遇到一个问题,就是写了一个正常的移动端首页,底部是导航,上面的是内容,在安卓手机是页面滑动到底部的时候,不会再滑动的,但是问题就出现在ios手机中。
页面正常布局是,导航是position:fixed,z-index:9,其他整体布局差不多是position:relative,z-index:1
(1.)滑动到底部的时候,ios手机还可以再次滑动,以至于把底部的导航条越过去了,导致看不到导航条,影响用户体验。
网上搜到的解决办法有几种
1.如果页面是没有滚动条的,可以使用下面的js代码
document.body.addEventListener('touchmove', function (e) {
e.preventDefault() // 阻止默认的处理方式(阻止下拉滑动的效果)
}, { passive: false }) // passive 参数不能省略,用来兼容ios和android
这几行代码是禁止整个页面的滑动,所以很好理解,下面看第二种
2.页面有很多内容,存在滚动条
那么解决办法就是,
在页面的最外层设置
.wrapper{
width:100%;
height:100%;
position:fixed;
z-index:1;
overflow-y:auto;
}
然后再去看ios的页面,成功阻止了这种橡皮筋效果
这里的height和width移动要设置100%;允许overflow-y:auto
by:闫
关于ios手机上拉和下拉到底部和顶部的橡皮筋问题的更多相关文章
- iOS开发 XML解析和下拉刷新,上拉加载更多
iOS开发 XML解析和下拉刷新,上拉加载更多 1.XML格式 <?xml version="1.0" encoding="utf-8" ?> 表示 ...
- ios 上拉载入下拉刷新Dome
为练手写了一个小的上拉载入很多其它下拉刷新的小的Dome . 没有太多的技术含量,仅仅是作为新手的启示用.是上一篇下拉载入的扩展.先看一下那个再看这个就easy非常多. Dome下载:http://d ...
- Flutter学习笔记(25)--ListView实现上拉刷新下拉加载
如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...
- JS 模拟手机页面文件的下拉刷新
js 模拟手机页面文件的下拉刷新初探 老总说需要这个功能,好吧那就看看相关的东西呗 最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂 查看 demo 要在仿真器下才能看到效果,比如chrome的里 ...
- iOS开源项目推荐|下拉刷新
MJRefresh - 仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者上拉刷新功能.可以自定义上下拉刷新的文字说明. CBStoreHouseRefresh ...
- Android之 RecyclerView,CardView 详解和相对应的上拉刷新下拉加载
随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 Material Design 设计语言中关于 Card 卡片概念的 ...
- 微信小程序实现上拉和下拉加载更多
在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更 ...
- Arduino 极速入门系列 - 光控灯(2) - 关于开关,上拉、下拉电阻那些事
接上篇,这次继续讲解光控灯的另外两个组成部分 - 开关和光敏电阻,光控灯里面将会有自锁开关按钮和光敏电阻.这此主要给新玩电子的朋友解释一下开关按钮的做法. 开关按钮的引脚电平读取问题 - 新手专用 我 ...
- 使用iScroll实现上拉或者下拉刷新
上拉或者下拉刷新的需求在移动端是非常常见的需求,大部分情况下,实现这个效果都使用网上现有的解决方案,例如有人使用swiper这个插件, 也有人使用iScroll这个滚动插件.本文的示例是利用iscro ...
- html5+css3实现上拉和下拉刷新
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
随机推荐
- Nginx——报错汇总
前言 记录NGINX的错误 错误 nginx: [emerg] unknown directive "erver" in /usr/local/nginx/conf/vhost/d ...
- Linux操作系统性能调优的方法
http://www.cnblogs.com/L-H-R-X-hehe/p/3963442.html Linux是一套免费使用和自由传播的类Unix操作系统,Linux不同的发行版本和不同的内核对各项 ...
- Spring boot jpa 设定MySQL数据库的自增ID主键值
内容简介 本文主要介绍在使用jpa向数据库添加数据时,如果表中主键为自增ID,对应实体类的设定方法. 实现步骤 只需要在自增主键上添加@GeneratedValue注解就可以实现自增,如下图: 关键代 ...
- App版本更新接口的设计
前段时间公司业务调整,新开了新的移动端的项目,所以和朋友聊到了“版本号”和“版本更新所需的数据表设计”. 一般来讲大部分的软件版本号分3段,比如 A.B.C A 表示大版本号,一般当软件整体重写,或出 ...
- [HTML5] Native lazy-loading for the web
According to HTTPArchive, images are the most requested asset type for most websites and usually tak ...
- ArrayList 集合 简单运用
集合 遍历 import java.util.ArrayList; class Demo02 { public static void main(String[] args) { // 创建Arra ...
- 2019.12.06 java基础代码
操作系统中默认码表是:gbk (一个中文字符占两个字节): utf-8(一个中文字符占三个字节): 数据库建库时的默认码表是:拉丁码表: (1) public class 定义: ...
- 树组件——jstree使用
本文记录的只是我自己当时的代码,每行的注释很清楚了,你自己可以做相应变通 一.使用前提: 1.下载jstree依赖包 2.相关页面引入样式["jstree/themes/default/st ...
- 【JOISC2018|2019】【20190622】mergers
题目 一\(n\)个节点的树,节点被分成\(k\)个集合,\(i\)属于\(S_i\), 一条边是可划分的当且仅当左右两边的子树不存在相同集合的点 你一次可以合并两个集合,求最少的操作次数使得所有边都 ...
- Tex家族关系
小书匠 声明:文章自一份其实很短的 LaTeX 入门文档学习,整理所得. Tex家族关系 Tex家族关系图 1.排版引擎 1.所谓的引擎,是指能够实现断行.分页等操作的程序(请注意这并不是定义) 2. ...