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滑动回弹效果导致的穿透问题的更多相关文章

  1. Android仿IOS回弹效果 ScrollView回弹 总结

    Android仿IOS回弹效果  ScrollView回弹 总结 应项目中的需求  须要仿IOS 下拉回弹的效果 , 我在网上搜了非常多 大多数都是拿scrollview 改吧改吧 试了一些  发现总 ...

  2. iOS开发——实用技术OC篇&8行代码教你搞定导航控制器全屏滑动返回效果

    8行代码教你搞定导航控制器全屏滑动返回效果 前言 如果自定了导航控制器的自控制器的leftBarButtonItem,可能会引发边缘滑动pop效果的失灵,是由于 self.interactivePop ...

  3. -webkit-overflow-scrolling 与滚动回弹效果.

    参考来源:https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling https://www.w3cways ...

  4. 移动端iOS阻止橡皮筋效果

    一.遇到的问题 移动端开发中,iOS的微信浏览器也好.Safari也好在浏览网页的时候会出现橡皮筋效果.就是当页面拉到尽头的时候还能再继续拉动,露出浏览器的底色,松手会回弹回去. 微信浏览器: Saf ...

  5. bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法

    bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法 bootsrtap框架做的h5页面,在android手机下没有卡顿问题,在苹果手机就一直存在这问题,开始毫无头绪 ...

  6. iOS实现抽屉效果

    抽屉效果 在iOS中非常多应用都用到了抽屉效果,比如腾讯的QQ,百度贴吧- --- 1. 终于效果例如以下图所看到的 --- 2.实现步骤 1.開始启动的时候.新建3个不同颜色的View的 1.设置3 ...

  7. 移动端页面 弹出框滚动,底部body锁定,不滚动 / 微信网页禁止回弹效果

    需求:页面有弹出层菜单,当弹出层菜单超出屏幕可视区域时,不能滚动.加上滚动后,底部body的滚动事件如何禁止,加上了overflow:hidden;还是不可用. 如下图:地区弹出框可以滚动,而底部的b ...

  8. Android UI效果实现——Activity滑动退出效果

    更新说明: 1.在QQ网友北京-旭的提醒下,在SlideFrame的initilize方法中添加了focusable.focusableInTouch.clickable的状态设置,否则会导致部分情况 ...

  9. android中列表的滑动删除仿ios滑动删除

    大家是不是觉得ios列表的滑动删除效果很酷炫?不用羡慕android也可以实现相同的效果 并且可以自定义效果,比如左滑删除,置顶,收藏,分享等等 其实就是自定义listview重写listview方法 ...

随机推荐

  1. sas(Serial Attached SCSI)技术详解

    1.什么是SAS 即串行SCSI技术,是一种磁盘连接技术,它综合了并行SCSI和串行连接技术(FC,SSA,IEEE1394)的优势,以串行通讯协议为协议基础架构,采用SCSI-3扩展指令集,并兼容S ...

  2. 如何使用js实现轮播图

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  3. S3. Android 消息推送

    [概要] 消息推送

  4. SAS学习笔记4 基本运算语句(lag、retain、_n_函数)

    lag:返回的是上一次lag函数运行时的实参,即lag(argument)=上一次lag函数执行时的argument retain:对变量进行值的初始化和保留到下一个迭代步 _n_:data步的自动变 ...

  5. Arm-Linux 移植 QT5.9 带 tslib,QT-creator配置

    平台                : Ubuntu 16.04   QT                 :5.9.8 tslib                 : 1.4arm-gcc      ...

  6. ActiveMQ 简单应用

    ActiveMQ简单应用到复杂的订单模块,提高前台的访问速度. 一.当提交订单后,发送消息给ActiveMQ. @Service public class JmsSend { private stat ...

  7. 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 ...

  8. C#利用反射和泛型给不同对象赋值

    /// <summary> /// 适用于初始化新实体 /// </summary> static public T RotationMapping<T, S>(S ...

  9. (三)XML基础(3):Xpath

    五.XPath:快速定位到节点 5.1 简介 5.2 语法 5.3 案例 XPath对有命名空间的xml文件和没有命名空间的xml定位节点的方法是不一样的,所以再对不同的xml需要进行不同的处理. 使 ...

  10. Xamarin(Android)制作启动画面

    1.将启动图片保存到Drawable文件夹下 2.在Drawable文件夹下创建splashscreen.xml <?xml version="1.0" encoding=& ...