ios滑动回弹效果导致的穿透问题
1 给样式中去除掉下面的css样式
-webkit-overflow-scrolling:touch;/* 当手指从触摸屏上移开,会保持一段时间的滚动 */
-webkit-overflow-scrolling:auto;/* 当手指从触摸屏上移开,滚动会立即停止 */
也就是:
*{
-webkit-overflow-scrolling:auto !important;
}
2 使用插件
方法二:可以使用插件inobounce(但是只适用于ios系统,安卓不适用)
官网:https://github.com/lazd/iNoBounce
在vue中:
//先下载npm install inobounce -s
//然后在script中:
<script>
import inobounce from 'inobounce'
export default {
data() {
return { }
},
mounted() { },
created() {
let u = navigator.userAgent
if (u.indexOf('iPhone') > -1) {
inobounce.enable()
}
},
beforeDestroy() {
inobounce.disable()
},
methods: { }
}
</script>
ios滑动回弹效果导致的穿透问题的更多相关文章
- Android仿IOS回弹效果 ScrollView回弹 总结
Android仿IOS回弹效果 ScrollView回弹 总结 应项目中的需求 须要仿IOS 下拉回弹的效果 , 我在网上搜了非常多 大多数都是拿scrollview 改吧改吧 试了一些 发现总 ...
- iOS开发——实用技术OC篇&8行代码教你搞定导航控制器全屏滑动返回效果
8行代码教你搞定导航控制器全屏滑动返回效果 前言 如果自定了导航控制器的自控制器的leftBarButtonItem,可能会引发边缘滑动pop效果的失灵,是由于 self.interactivePop ...
- -webkit-overflow-scrolling 与滚动回弹效果.
参考来源:https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling https://www.w3cways ...
- 移动端iOS阻止橡皮筋效果
一.遇到的问题 移动端开发中,iOS的微信浏览器也好.Safari也好在浏览网页的时候会出现橡皮筋效果.就是当页面拉到尽头的时候还能再继续拉动,露出浏览器的底色,松手会回弹回去. 微信浏览器: Saf ...
- bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法
bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法 bootsrtap框架做的h5页面,在android手机下没有卡顿问题,在苹果手机就一直存在这问题,开始毫无头绪 ...
- iOS实现抽屉效果
抽屉效果 在iOS中非常多应用都用到了抽屉效果,比如腾讯的QQ,百度贴吧- --- 1. 终于效果例如以下图所看到的 --- 2.实现步骤 1.開始启动的时候.新建3个不同颜色的View的 1.设置3 ...
- 移动端页面 弹出框滚动,底部body锁定,不滚动 / 微信网页禁止回弹效果
需求:页面有弹出层菜单,当弹出层菜单超出屏幕可视区域时,不能滚动.加上滚动后,底部body的滚动事件如何禁止,加上了overflow:hidden;还是不可用. 如下图:地区弹出框可以滚动,而底部的b ...
- Android UI效果实现——Activity滑动退出效果
更新说明: 1.在QQ网友北京-旭的提醒下,在SlideFrame的initilize方法中添加了focusable.focusableInTouch.clickable的状态设置,否则会导致部分情况 ...
- android中列表的滑动删除仿ios滑动删除
大家是不是觉得ios列表的滑动删除效果很酷炫?不用羡慕android也可以实现相同的效果 并且可以自定义效果,比如左滑删除,置顶,收藏,分享等等 其实就是自定义listview重写listview方法 ...
随机推荐
- sas(Serial Attached SCSI)技术详解
1.什么是SAS 即串行SCSI技术,是一种磁盘连接技术,它综合了并行SCSI和串行连接技术(FC,SSA,IEEE1394)的优势,以串行通讯协议为协议基础架构,采用SCSI-3扩展指令集,并兼容S ...
- 如何使用js实现轮播图
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- S3. Android 消息推送
[概要] 消息推送
- SAS学习笔记4 基本运算语句(lag、retain、_n_函数)
lag:返回的是上一次lag函数运行时的实参,即lag(argument)=上一次lag函数执行时的argument retain:对变量进行值的初始化和保留到下一个迭代步 _n_:data步的自动变 ...
- Arm-Linux 移植 QT5.9 带 tslib,QT-creator配置
平台 : Ubuntu 16.04 QT :5.9.8 tslib : 1.4arm-gcc ...
- ActiveMQ 简单应用
ActiveMQ简单应用到复杂的订单模块,提高前台的访问速度. 一.当提交订单后,发送消息给ActiveMQ. @Service public class JmsSend { private stat ...
- C# Entity Framework The ObjectContext instance has been disposed and can no longer be used for operations that require a connection
The ObjectContext instance has been disposed and can no longer be used for operations that require a ...
- C#利用反射和泛型给不同对象赋值
/// <summary> /// 适用于初始化新实体 /// </summary> static public T RotationMapping<T, S>(S ...
- (三)XML基础(3):Xpath
五.XPath:快速定位到节点 5.1 简介 5.2 语法 5.3 案例 XPath对有命名空间的xml文件和没有命名空间的xml定位节点的方法是不一样的,所以再对不同的xml需要进行不同的处理. 使 ...
- Xamarin(Android)制作启动画面
1.将启动图片保存到Drawable文件夹下 2.在Drawable文件夹下创建splashscreen.xml <?xml version="1.0" encoding=& ...