禁止IOS H5的滑动回弹

我们在开发h5页面时不知道大家发现这个问题没，在水果机上，页面会有弹性，有时候我们滑动中间部分时，有时候header、footer部分会跟着动(在此之前疯狂百度过很多方法都没解决，水群的时候也看到很多人也遇到过这个问题，今天无意中发现一个库能解决这个问题)

想禁止这个行为只要引入一个库就可以了
github地址

  <script src="./inobounce.js"></script>

因为这个库是禁止了整个页面的滑动,我们需要在滚动的盒子外面加上height or max-height, overflow: auto , -webkit-overflow-scrolling: touch

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="./inobounce.js"></script><title>Document</title>
</head>
<style>
*{margin: 0;padding: 0;
}
#app{display: flex;flex-direction: column;height: 100vh;flex-wrap: nowrap;
}
.header{height: 50px;width: 100%;background: red;
}
.footer{height: 50px;width: 100%;background: gray;
}
.content {flex: 1;display: block;overflow-y: auto;margin-bottom: 4px;-webkit-overflow-scrolling: touch;background: #f1f1f1;
}
li{list-style: none;width: 100%;height: 40px;
}
li:nth-of-type(2n){background: #f1f1f1;
}
li:nth-of-type(2n + 1){background: white;
}
</style>
<body><div id="app"><div class="header"></div><div class="content"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><div class="footer"></div></div>
</body>
</html>

禁止IOS H5的滑动回弹相关推荐

苹果手机IOS 禁止H5的滑动回弹
IOS的移动端/H5/webapp 页面如果滚动到底部或者在页面顶部再往上拉,都会出现一个回弹的效果. 想取消这个效果可以引入一个简单的库就行,不用再写繁琐的样式. 下载这个inobounce.js ...
IOS H5页面滑动过于频繁出现短暂白屏
最近做一个H5活动,苹果部分手机用QQ扫描打开后,频繁滑动出现短暂白屏现象, 数据均存在只是背景色变白,问题如下: 经过排查主要是由于IOS的回弹效果导致,即-webkit-overflow-scro ...
禁止ios版本上拉回弹效果
有时候我们需要在底部写一个滚动的效果,此时ios自带的上拉回弹效果就很影响体验,我们可以加上这么一段代码禁用ios的回弹效果 document.body.addEventListener('touch ...
app内嵌h5页面在ios手机端滑动卡顿的解决方法
app内嵌h5页面在ios手机端滑动卡顿的解决方法参考文章: (1)app内嵌h5页面在ios手机端滑动卡顿的解决方法 (2)https://www.cnblogs.com/1rookie/p/11 ...
移动端阻止ios弹性滑动_禁止iOS的弹性滚动微信的下拉回弹
禁止iOS的弹性滚动微信的下拉回弹一种方法: html头部添加然后将页面body的高度设为window的高度 $("body").height( $(window).heig ...
-webkit-touch-callout: none；禁止ios弹出菜单，长按图片保存到手机时
-webkit-touch-callout: none;禁止ios弹出菜单,长按图片保存到手机时有一个需求就是h5页面中,长按二维码图片,保存到手机:在ios上经常长按会弹出ios的菜单,而无法每次 ...
vue中禁止ios橡皮筋效果（亲测有效）
相信有很多前端的朋友都遇到过这个问题,这个问题真的很头疼.ios的橡皮筋效果会带来一些莫名其妙的bug.如果直接对body禁止的话,那整个页面都无法滑动了.所以我今天带来一个解决方案.原博客找不到了, ...
解决ios H5微信支付不能跳回App的问题
解决ios H5微信支付不能跳回App的问题 app项目是uni-app开发的安卓和iOS版本,安卓测试无问题,以下主要说iOS的解决方案. 问题点:app用webview打开H5页面,在H5页面发起 ...
小程序IOS页面下拉回弹效果
小程序IOS页面下拉回弹效果小程序在ios系统上的橡皮筋回弹效果,是ios特有的,目前小程序没有特有的方法去控制.根据业务需求不想要这个回弹的效果,故此记录一下解决方案: 方案一:当页面内容比较 ...

禁止IOS H5的滑动回弹

禁止IOS H5的滑动回弹相关推荐

最新文章

热门文章