inobounce.js : 禁止IOS H5的滑动回弹
IOS的移动端/H5/webapp 页面如果滚动到底部或者在页面顶部再往上拉,都会出现一个回弹的效果。
想取消这个效果可以引入一个简单的库就行,不用再写繁琐的样式。
直接引入就行
<script src="inobounce.js"></script>
例子:
因为这个库是禁止了整个页面的滑动,所以如果页面中有其他元素需要滑动的,要给滑动元素设置一个height或max-height,还有overflow: auto; -webkit-overflow-scrolling: touch;
<style>
ul {
height: 115px;
border: 1px solid gray;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
</style> <ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
<li>List Item 10</li>
</ul>
inobounce.js : 禁止IOS H5的滑动回弹的更多相关文章
- IOS的H5页面滑动不流畅的问题:
IOS的H5页面滑动不流畅的问题: -webkit-overflow-scrolling : touch; 需要滑动的是哪块区域,就在哪里加上这段代码就OK
- ios h5 app avalon tap点击事件失效及点击延迟300ms问题解决方法
1.ios h5 app avalon tap事件失效 使用MUI制作app界面,使用avalon.js渲染数据,发现在(Android上正常)ios上运行时容器div的avalon的ms-on-ta ...
- js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll
开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法: ...
- Vue.js 使用 Swiper.js 在 iOS 11 时出现错误
前言 在H5项目中,需要用到翻页效果,通过 Swiper 来实现,安装 Swiper npm i swiper -S 但是实际使用中,发现低版本 iOS < 11 会出现下面这个错误: Synt ...
- [转]js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll
原贴:https://www.cnblogs.com/jasonwang2y60/p/6848464.html 原贴:https://www.cnblogs.com/jasonwang2y60/p/6 ...
- 使用 iosOverlay.js 创建 iOS 风格的提示和通知
iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼 ...
- Phonegap 之 iOS银联在线支付(js调用ios端银联支付控件)
Phonegap项目,做支付的时候,当把网站打包到ios或android端成app后,在app上通过wap调用银联在线存在一个问题: 就是当从银联支付成功后,再从服务器返回到app客户端就很难实现. ...
- 优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案
简介 本篇为大家介绍一个优秀的开源小项目:WebViewJavascriptBridge. 它优雅地实现了在使用UIWebView时JS与ios 的ObjC nativecode之间的互调,支持消息发 ...
- JS实现IOS风格对话框 jquery / zepto
Alert alert("这个是一个alert弹窗"); Alert 自定义参数 alert({ content: "自定义alert弹窗", btnText: ...
随机推荐
- 用JavaScript写一个JD放大镜
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- synchronized(this) 与 synchronized(class) 理解
1.概念 synchronized 是 Java 中的关键字,是利用锁的机制来实现同步的. 锁机制有如下两种特性: 互斥性:即在同一时间只允许一个线程持有某个对象锁,通过这种特性来实现多线程中的协调机 ...
- linux利用用户组给用户赋予不同的权限
在Linux中wheel组就类似于一个管理员的组.通常在LUNIX下,即使我们有系统管理员root的权限,也不推荐用root用户登录.一般情况下用普通用户登录就可以了,在需要root权限执行一些操作时 ...
- cf期望概率专题
cf1009E:求到第i段期望和的比较困难,但是单独求每段的期望是比较容易的,所以单独对每段求和,然后累计总和 E[i]=1/2*a1+1/4*a2+...+1/2^(i-1)*ai-1+1/2^(i ...
- (转)NAT与NAT穿越学习总结--ICE过程讲的不错
转:http://cgs1999.iteye.com/blog/1994072 1.引言网络地址转换(Network Address Translation,简称NAT)是一种在IP分组通过路由器或防 ...
- (转)Linux下使用system()函数一定要谨慎
转:http://my.oschina.net/renhc/blog/53580 曾经的曾经,被system()函数折磨过,之所以这样,是因为对system()函数了解不够深入.只是简单的知道用这个函 ...
- Selenium2Library中select frame关键字对没有name和id的frame或者iframe的处理
elenium2Library中原有的select_frame函数(对应的关键字为select frame)可根据locator选择frame,但是,若某个frame或者iframe没有id,没有na ...
- phpMailer 手册
phpMailer5.0.0属性: 英文地址:http://phpmailer.worxware.com/index.php?pg=properties 属性 (v5.0.0) 类型 默认 描述 $P ...
- CSS:CSS 尺寸 (Dimension)
ylbtech-CSS:CSS 尺寸 (Dimension) 1.返回顶部 1. CSS 尺寸 (Dimension) CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度.同样,它允 ...
- 3.5 compose redux sages
基于 redux-thunk 的实现特性,可以做到基于 promise 和递归的组合编排,而 redux-saga 提供了更容易的更高级的组合编排方式(当然这一切要归功于 Generator 特性), ...