H5解决IOS橡皮筋问题(改进Vue)
H5解决IOS橡皮筋(改进Vue)
在ios系统中,页面在上下滑动的时候,会触发橡皮筋问题,页面的顶部和底部跟着页面一起滑动的问题,下面就讲一下如何解决这种问题。
1、iOS如何阻止“橡皮筋效果”?
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、如何解决
//一进页面的时候执行的方法
isIosStopScroll() {const ios = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // 判断是否为iosif (ios) {var divEl = document.getElementById('myCardList'); //这是你需要定义的容器,这个容器里滑动正常,出了这个容器,页面的橡皮筋效果就被禁用掉了this.iosTrouchFn(divEl);}}
created() {this.isIosStopScroll(); //这里开始执行}
//解决ios橡皮筋问题
被调用的方法
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防止阻止默认事件不生效
}
然而并没有结束…虽然橡皮筋问题解决的但会出现另一个问题,我不从滚动元素开始滑动,我从Header 开始滑动IOS会遇见截断的问题
解决方法
<div @touchmove="touchmoves"> 这是Header 添加滑动事件xxxxxx</div>
touchmoves(e){ //阻止滑动 就解决了截断问题e.preventDefault()}
觉得有用点个收藏呗QWQ
H5解决IOS橡皮筋问题(改进Vue)相关推荐
- 解决IOS橡皮筋效果
1.一棍子打死 (全部滚动条失效) app.vue文件mounted中 document.body.addEventListener('touchmove', function (e) {e.prev ...
- h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题
h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题 参考文章: (1)h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题 (2)https://www.cnblogs.com/bl ...
- vue解决ios橡皮筋回弹
通过监听 touchmove 事件:当手指在屏幕上滑动的时候连续地触发.在这个事件发生期间,调用preventDefault()事件可以阻止滚动. // 禁止页面滚动var forbidScroll ...
- 解决ios橡皮筋回弹
在ios系统中,页面在上下滑动的时候,会触发橡皮筋问题,页面的顶部和底部跟着页面一起滑动的问题,下面就讲一下如何解决这种问题. 在钩子函数created中加入 // 禁止页面滚动var forbidS ...
- ios html5 拍照旋转,H5 解决ios拍照旋转90度
var img_photo=''; function selectFileImage(fileObj) { var formdata = new FormData(); var file = file ...
- H5解决IOS拍照横屏问题,含后端上传
IOS这个照片横屏问题相信困扰了不少程序猿,作者当时也是寻找各种解决办法,前端处理试过,后端处理也试过,base64也用过,无奈没有更好的方法,今天这个问题可以说是完美解决了,废话不多说 直接撸代码 ...
- H5解决IOS端无法使用摇一摇功能,解决监听devicemotion失效问题
IOS端无法使用摇一摇功能,主要方法是对devicemotion的监听,devicemotion如果不清楚是做什么的,可以找下度娘. DeviceMotion 到底是何物? 在 window 对象中存 ...
- 解决h5嵌套ios中的橡皮筋效果
最近公司功能需求要把新开发的h5页面嵌入ios端app中,遇到这个让人很是头疼的一个问题,h5页面在ios端,页面一直存在回弹效果.如果直接对body禁止的话,然后个页面都无法滑动了.今天终于搞定了这 ...
- 解决ios H5微信支付不能跳回App的问题
解决ios H5微信支付不能跳回App的问题 app项目是uni-app开发的安卓和iOS版本,安卓测试无问题,以下主要说iOS的解决方案. 问题点:app用webview打开H5页面,在H5页面发起 ...
最新文章
- 自定义组合控件:Banner、轮播图、广告栏控件
- LruCache缓存bitmap(一)
- Angular应用里具有back功能的按钮实现
- 查询链接服务器信息,SQL Server链接服务器
- python中mysql更新字段中传参问题
- phpcmsV9 默认主题模板(templates文件目录结构)介绍
- 菜鸟进阶必修课-主板插线小百科(图)
- Could not create the view: An unexpected exception was thrown.
- Spring Core Container 源码分析七:注册 Bean Definitions
- Jquery如何操作Table的某一个td
- [转]Windows 下 Apache Virtual hosts 简单配置
- fastjson safemode_Fastjson远程代码执行漏洞安全通告
- 贪吃蛇游戏设计(一)————游戏策划
- CUDA各版本下载地址
- matlab中clc、clear、close命令以及函数文件
- prisma1.0实践
- 数据库查询练习(一)
- ORB-SLAM2栅格地图构建
- SpringBoot非官方教程 | 第二十篇: 处理表单提交
- js三元表达式使用方法概述
热门文章
- Kettle使用统一的数据库配置
- 青春如你,不曾消逝。
- Vue报错Error: Avoided redundant navigation to current locatiton 重复点菜单报错问题
- 机器人教练走进驾校_机器人教练“现身”驾校 嘉兴率先开启驾培人工智能教学模式...
- 【LeetCode】TreeNode
- 【NLP】Python实例:基于文本相似度对申报项目进行查重设计
- 种太阳五联益生菌教你如何正确给孩子吃益生菌
- 信贷风控拒绝客户的捞回策略详解
- word 2013中如何设置第几页共几页这种页码格式
- 网络安全中的“秘语”VS 张琦大话梦语