iOS如何阻止“橡皮筋效果”?
在ios系统中,页面在上下滑动的时候,会触发橡皮筋问题,页面的顶部和底部跟着页面一起滑动的问题,下面就讲一下如何解决这种问题。
1、iOS如何阻止“橡皮筋效果”?
背景:
iOS 5 之后开始支持 Native Scrolling,为 Web App 带来媲美原生应用的滚动体验。使用十分方便只要在 CSS 中加入:
HTML
CSS
.wrapper {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
但是 iOS Safari 在滑动的时候会有讨厌的 “橡皮筋效果” (Over Scroll):
设计:
┌─────────────┐
│ Header │
├─────────────┤
│ │
│ Scroll Area │
│ │
├─────────────┤
│ Footer │
└─────────────┘
需求:
Scroll Area 支持垂直区域滚动。
滑动 Header 和 Footer 不会引发全局的 “橡皮筋效果”。
Scroll Area 滑动到顶部或者底部,再向上或者向下拉动不会触发全局的 “橡皮筋效果”。
情况2 会触发 Scroll Area 局部的 “橡皮筋效果”。
2、如何解决
我是用RN开发的,我这个核心方法,应该前端都使用,你们把一进页面的触发事件改下就行了。
A页面(A引入B方法)
//一进页面的时候执行的方法isIosStopScroll() {const ios = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // 判断是否为iosif (ios) {var divEl = document.getElementById('myCardList'); //这是你需要定义的容器,这个容器里滑动正常,出了这个容器,页面的橡皮筋效果就被禁用掉了iosTrouchFn(divEl);}}componentDidMount() {this.init(); //这是页面加载内容的事件,可以忽略this.isIosStopScroll(); //这里开始执行}
Bjs文件
//解决ios橡皮筋问题
export function iosTrouchFn(el) {//el需要滑动的元素el.addEventListener('touchmove', function (e) {e.isSCROLL = true;})document.body.addEventListener('touchmove', function (e) {if (!e.isSCROLL) {e.preventDefault(); //阻止默认事件(上下滑动)} else {//需要滑动的区域var top = el.scrollTop; //对象最顶端和窗口最顶端之间的距离 var scrollH = el.scrollHeight; //含滚动内容的元素大小var offsetH = el.offsetHeight; //网页可见区域高var cScroll = top + offsetH; //当前滚动的距离//被滑动到最上方和最下方的时候if (top == 0) {top = 1; //0~1之间的小数会被当成0} else if (cScroll === scrollH) {el.scrollTop = top - 0.1;}}}, { passive: false }) //passive防止阻止默认事件不生效
}
iOS如何阻止“橡皮筋效果”?相关推荐
- 移动端阻止ios弹性滑动_移动端iOS阻止橡皮筋效果
一.遇到的问题 移动端开发中,iOS的微信浏览器也好.Safari也好在浏览网页的时候会出现橡皮筋效果.就是当页面拉到尽头的时候还能再继续拉动,露出浏览器的底色,松手会回弹回去. 微信浏览器: Saf ...
- 解决h5嵌套ios中的橡皮筋效果
最近公司功能需求要把新开发的h5页面嵌入ios端app中,遇到这个让人很是头疼的一个问题,h5页面在ios端,页面一直存在回弹效果.如果直接对body禁止的话,然后个页面都无法滑动了.今天终于搞定了这 ...
- 内置h5 调用safari系统浏览器打开_开发教我做设计:移动端H5页面中的橡皮筋效果...
什么是橡皮筋效果(Over Scroll)? 在浏览被H5与iOS客户端混合编程的页面时,由于Safari浏览器的特性,当H5页面滑动到页面顶部.页面底部的位置时,继续下拉/上拉H5网页会出现&quo ...
- vue中禁止ios橡皮筋效果(亲测有效)
相信有很多前端的朋友都遇到过这个问题,这个问题真的很头疼.ios的橡皮筋效果会带来一些莫名其妙的bug.如果直接对body禁止的话,那整个页面都无法滑动了.所以我今天带来一个解决方案.原博客找不到了, ...
- 禁止ios浏览器页面滚动的橡皮筋效果
问题:在做手机端,通过拖拽调整某个div大小时,拖拽引起了整体页面的弹动 方法一:通过css设置body宽高 html, body {width: 100%;height: 100%;overflow ...
- 禁止 ios 橡皮筋效果
body 的橡皮筋效果触发,会导致内部元素无法滚动,解决方法很简单. 高版本 ios 只需对 body 这是 height:100%; overflow:hidden; 即可. 而低版本浏览器,则需要 ...
- html关闭ios橡皮筋效果,禁止ios浏览器页面上下滚动 (橡皮筋效果)
在ios任何版本的浏览器(包括ios微信内置的浏览器),滚动页面的时候会出现整个页面上下滚动的效果(百度说是橡皮筋效果),虽然不耽误使用,但是让人心烦,所以要禁止掉这个行为. 有两种方法可以解决这个问 ...
- 解决IOS因iframe滑动引起的橡皮筋效果
这个在上一篇文章也提过,IOS应用有一个功能需要预览邮件内容,邮件内容是iframe嵌套,并且使用scale进行缩放,在iframe上使用mailbox包含这个ifrme:在box上添加了相应的样式, ...
- 解决IOS橡皮筋效果
1.一棍子打死 (全部滚动条失效) app.vue文件mounted中 document.body.addEventListener('touchmove', function (e) {e.prev ...
最新文章
- dacom蓝牙耳机怎么重置_双蓝牙耳机另一半怎么连接
- EWS 通过SubscribeToPullNotifications订阅Exchange新邮件提醒
- nginx相关的一些记录
- 转载:谢谢原作者: 块设备驱动实战基础篇二 (继续完善170行过滤驱动代码至200行)
- Py之GUI之PyQt:PyQt5的简介、入门、安装(QtCreator和QtDesigner)图文教程之详细攻略
- struts2配置文件(简单)
- android 一个有漂亮动画效果的Dialog
- mysql修改客户端编码命令_mysql命令行修改字符编码
- 统计sql server数据库中所有表的记录数
- DELL服务器 技术交流QQ群
- Go语言跨平台预编译
- [原创]测试用例设计策略
- 真·完美 极域电子教室破解
- 高等数学660---从214到221
- CSS 盒子模型 第三节
- 正则表达式前端js,银行卡号/身份证/姓名号脱敏
- 入驻csdn的自我介绍
- oracle 数据库网络传输,Oracle数据库之间数据传输方法探讨
- iOS AV Foundation 二维码扫描 02 扫码
- 共享文件服务器设置配额,从windows server的文件服务到分布式文件服务(九):共享文件夹的磁盘配额管理...