IOS的移动端/H5/webapp 页面如果滚动到底部或者在页面顶部再往上拉,都会出现一个回弹的效果。

想取消这个效果可以引入一个简单的库就行,不用再写繁琐的样式。

github地址

直接引入就行

<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的滑动回弹的更多相关文章

  1. IOS的H5页面滑动不流畅的问题:

    IOS的H5页面滑动不流畅的问题: -webkit-overflow-scrolling : touch; 需要滑动的是哪块区域,就在哪里加上这段代码就OK

  2. ios h5 app avalon tap点击事件失效及点击延迟300ms问题解决方法

    1.ios h5 app avalon tap事件失效 使用MUI制作app界面,使用avalon.js渲染数据,发现在(Android上正常)ios上运行时容器div的avalon的ms-on-ta ...

  3. js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll

    开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法: ...

  4. Vue.js 使用 Swiper.js 在 iOS 11 时出现错误

    前言 在H5项目中,需要用到翻页效果,通过 Swiper 来实现,安装 Swiper npm i swiper -S 但是实际使用中,发现低版本 iOS < 11 会出现下面这个错误: Synt ...

  5. [转]js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll

    原贴:https://www.cnblogs.com/jasonwang2y60/p/6848464.html 原贴:https://www.cnblogs.com/jasonwang2y60/p/6 ...

  6. 使用 iosOverlay.js 创建 iOS 风格的提示和通知

    iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼 ...

  7. Phonegap 之 iOS银联在线支付(js调用ios端银联支付控件)

    Phonegap项目,做支付的时候,当把网站打包到ios或android端成app后,在app上通过wap调用银联在线存在一个问题: 就是当从银联支付成功后,再从服务器返回到app客户端就很难实现. ...

  8. 优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案

    简介 本篇为大家介绍一个优秀的开源小项目:WebViewJavascriptBridge. 它优雅地实现了在使用UIWebView时JS与ios 的ObjC nativecode之间的互调,支持消息发 ...

  9. JS实现IOS风格对话框 jquery / zepto

    Alert alert("这个是一个alert弹窗"); Alert 自定义参数 alert({ content: "自定义alert弹窗", btnText: ...

随机推荐

  1. 谈谈你对本次2018级ACM新手赛的体会

    第一次参加这类比赛,挺有趣的,在现场磨了四个小时也没有全写出来,收获还是挺大的,至少意识到自己是能做到这些的(笑 今后也会多多努力

  2. 使用cordova,使html5也能像IOS,Android那样可以 调取手机的相机拍照功能

    一,我们在使用html5的技术开发手机app时,并不能像IOS,Android那样可以调取手机原生的相机功能,这是我们就要借助一些插件来时实现. 二,安装Cordoba的相机插件 1.在文件目录下,使 ...

  3. vue中使用v-if判断数组长度是出现length报错

    在vue中使用v-if判断数组的长度时出现报错 <el-collapse-item :key="index" v-if="data.childrens.length ...

  4. PHP FILTER_VALIDATE_FLOAT 过滤器

    定义和用法 FILTER_VALIDATE_FLOAT 过滤器把值作为浮点数来验证. Name: "float" ID-number: 259 实例 <?php $var=1 ...

  5. 思维+multiset优化——cf1249E

    正着想很难,但是反着想就容易有思路 /* 将问题转化为 挑选最多的线段,每个点的覆盖次数不超过k次 multiset里存k个右端点,表示第i层当前的最远右端点,每次来一根新线段,能填就填进并更新,不能 ...

  6. Linux-vim编辑器 常用命令 复制粘贴

    Linux-vim编辑器 一.vim三种工作模式 1.1.命令模式 在此模式下,可以使用上.下.左.右键或者 k.j.h.l 命令进行光标移动,还可以对文件内容进行复制.粘贴.替换.删除等操作. 1. ...

  7. 浅谈C/C++中的static和extern关键字

    static是C++中常用的修饰符,它被用来控制变量的存贮方式和可见性.extern "C"是使C++能够调用C写作的库文件的一个手段,如果要对编译器提示使用C的方式来处理函数的话 ...

  8. 静态成员 static 能被继承吗

    在类定义中,它的成员(包括数据成员和 成员函数)可以用关键字static声明为静 态的,这些成员称为静态成员 静态成员的特性: • 不管这个类创建了多少个对象,静态成员只有一个拷贝,这个拷贝被所有属于 ...

  9. PXE装机

    支持 centOS 6 支持 PXE 装机的网卡必须自带 ROM(非意识性存储器)存储内容包括:DHCP 客户端,TFTP 客户端,PXE 协议客户端,将网卡设置第一启动项. DHCP:自动分配 IP ...

  10. 39-Ubuntu-用户管理-04-usermod设置主组和附加组

    主组:通常在新建用户时指定,在/etc/passwd的第4列GID显示主组名. 附加组:在/etc/group中最后一列显示该组的用户列表,用于指定用户的附加权限. 1.修改用户的主组 sudo us ...