inobounce.js : 禁止IOS H5的滑动回弹

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>

原文地址:https://www.cnblogs.com/haqiao/p/10417366.html

时间: 2024-10-11 07:01:11

inobounce.js : 禁止IOS H5的滑动回弹的相关文章

使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)

PC 移动端兼容  IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ 惯性助动,滑动回弹 门面模式 window.onload = function() { /*测试数据*/ var insert = ''; for (var i = 0; i < 80; i++) {  insert += '<div style = "width:100%; text-align:center;">滑动测试 ' + i + '</div>

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

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

js与ios交互,js示例

js与ios交互,js示例 js文件:coco3gNativeUser.js let c3_navtive_user = {}; (function(owner) { owner.temp = {}; //右上角按钮及事件 owner.__defineSetter__('right_button_item',function(item){ this._right_button_item = item; }); owner.__defineGetter__('right_button_item',

js禁止浏览器页面后退功能

js禁止浏览器页面后退功能: <script> $(function(){ if(window.location.href.indexOf("/login") > -1) { //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL);

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

Phonegap项目,做支付的时候,当把网站打包到ios或android端成app后,在app上通过wap调用银联在线存在一个问题: 就是当从银联支付成功后,再从服务器返回到app客户端就很难实现. wap银联支付流程是这样:客户端---> 服务器(构建支付请求)--> 银联支付 ---> 返回到服务端(处理支付结果).所以对于手机网站银联支付没有问题,但是对于ios端app和android端app, 再通过wap支付,发现支付成功后,很难在回到app客户端了. 所以这里就必须借助Pho

js禁止鼠标右键和禁止ctrl+c复制

<script type="text/javascript"> //禁止ctrl复制 document.onkeydown=function(){ if((event.ctrlKey) && (window.event.keycode==67)){ event.returnValue=false; alert("Ctrl+C被禁止啦!"); } } document.onmousedown=function(){ if(event.but

禁止ios默认拉动弹性行为

document.ontouchmove = function(e) { e.preventDefault(); } /** 禁止ios默认拉动弹性行为**/

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

本篇为大家介绍一个优秀的开源小项目:WebViewJavascriptBridge. 它优雅地实现了在使用UIWebView时JS与ios 的ObjC nativecode之间的互调,支持消息发送.接收.消息处理器的注册与调用以及设置消息处理的回调. 就像项目的名称一样,它是连接UIWebView和Javascript的bridge.在加入这个项目之后,他们之间的交互处理方式变得很友好. 在native code中跟UIWebView中的js交互的时候,像下面这样: [cpp] view pla

[iOS]通过JS调用iOS函数时的URL编码问题

在前面的文章:[iOS]在WebApp中如何使用JS调用iOS的函数 中,提到了如何使用JS通过修改URL调用iOS的内部函数. 其中会遇到一个问题,就是编码问题,比如通过URL调用弹窗,在里面写上内容:你好汪海. 那链接大概就是这样的:http://xxx.com#ios?action=alert&param=你好汪海 但是在iOS中接收到的时候会出现中文的乱码: http://xxx.com#ios?action=alert&param=%25E6%2596%2587%25E4 遇到这