h5页面ios，双击向上滑动，拖拽到底部还能继续拖拽（露出黑色背景）
在ios下，双击屏幕某些地方，滚动条会自动向上走一段。
当用微信看h5的时候，拖拽到底部，会漏出来，微信自带下面的灰黑色皮肤。
用js解决一下吧，这俩问题很类似，总结到一起了。
----------特别注意，安卓没有发生过这些情况，因为解决办法是给最外层的wrapper，overflow-y:auto;也就是放弃了原生的滚动条，所以解决的时候要判断一下系统，安卓就不用处理了。
html部分：----------------------------
<body>
<div class="wrapper">
<section>内容部分aaaa111</section>
<section>内容部分aaaa222</section>
<section>内容部分aaaa333</section>
</div>
</body>
css部分：--------------------------
.wrapper2{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow-y:auto;
-webkit-overflow-scrolling : touch;
}
js部分：----------------------------
/*阻止ios拖拽到底部还能继续拖拽*/
var ScrollFix = function(elem) {
// Variables to track inputs
var startY, startTopScroll;
elem = elem || document.querySelector(elem);
// If there is no element, then do nothing
if(!elem)
return;
// Handle the start of interactions
elem.addEventListener('touchstart', function(event){
startY = event.touches[0].pageY;
startTopScroll = elem.scrollTop;
if(startTopScroll <= 0)
elem.scrollTop = 1;
if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)
elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
}, false);
};
/*判断设备调用ScrollFix*/
var sUserAgent=navigator.userAgent.toLowerCase();
if(sUserAgent.match(/iphone os/i) == "iphone os"){
$('.wrapper').addClass('wrapper2');
ScrollFix($('.wrapper2')[0]);
}
/*阻止用户双击使屏幕上滑*/
var agent = navigator.userAgent.toLowerCase(); //检测是否是ios
var iLastTouch = null; //缓存上一次tap的时间
if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0)
{
document.body.addEventListener('touchend', function(event)
{
var iNow = new Date()
.getTime();
iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;
var delta = iNow - iLastTouch;
if (delta < 500 && delta > 0)
{
event.preventDefault();
return false;
}
iLastTouch = iNow;
}, false);
}
h5页面ios，双击向上滑动，拖拽到底部还能继续拖拽（露出黑色背景）的更多相关文章
- 原生H5页面模拟APP左侧滑动删除效果
话不多说,往左侧滑动,显示删除,我们先来看一下效果图:如下: 这个布局我就不多说,反正就是一行ul,li, class名“item” js代码如下: $(".item").on(& ...
- h5页面ios键盘弹出收起后页面底部留白问题
<input placeholder="验证码" type="tel" v-model="verify" maxlength=&quo ...
- H5页面IOS中键盘弹出导致点击错位的问题
IOS在点击输入框弹出键盘 键盘回缩 后 定位没有相应改变 还有 textarea 也会弹出键盘 $("input").blur(function() { console.l ...
- H5页面关于android软键盘弹出顶起底部元素的解决方案
应用场景:用div在移动端页面设置一个底部工具栏,css的代码大概如下: .tool{ width: 100%; height: 60px; position: fixed; left: 0px; b ...
- ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法
一. 运行环境: iphone所有机型的qq浏览器,safari浏览器,微信内置浏览器(qq浏览器内核)等. 二. 异常现象: 1. 大幅度上下滑动h5页面,然后停止滑动,有时候会影响到页面滚动,如局 ...
- 客户端相关知识学习（四）之H5页面如何嵌套到APP中
Android原生如何渲染H5页面 Android与 H5 的交互方式大概有以下 1 种: 利用WebView进行交互(系统API) iOS原生如何渲染H5页面 iOS 与 H5 的交互方式大概有以下 ...
- Android使用WebView加载H5页面播放视频音频，退出后还在播放问题解决
Android中经常会使用到WebView来加载H5的页面,如果H5页面中有音频或者视频的播放时,还没播放完就退出界面,这个时候会发现音频或者视频还在后台播放,这就有点一脸懵逼了,下面是解决方案: 方 ...
- IOS的H5页面滑动不流畅的问题：
IOS的H5页面滑动不流畅的问题: -webkit-overflow-scrolling : touch; 需要滑动的是哪块区域,就在哪里加上这段代码就OK
- vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟，连续点击无反应的问题
异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...
随机推荐
- TSQL--约束基础和Demo
--============================================================ SQL SERVER 中使用constraint和role来对数据进行限制 ...
- STM32 IAP+Ymodem功能实现（参考官方代码）
IAP:在线升级代码 ,通俗的讲就是通过USART,IIC,或者SPI,USB等等,方式,在程序中升级程序,一般用在远程升级,或者是在PCB板子都安装到模具之后还需要升级代码,这样我们就需要,通过IA ...
- UML uml高级知识之用例图
uml高级知识之用例图 建模工具推荐使用 visio2010: include:选择菜单栏中的'UML'->单击’构造型‘->新建->构造型那里输入include->基类那里选 ...
- 深入了解java虚拟机（JVM） 第一章 内存区域分布情况
前言: 本文主要是我自己总结的一些技巧,可能对搜到这篇的来观看的朋友有些很难理解,请见谅. 一.JVM的运行时数据区 总共有两个区域: 1.线程共享区:方法区,java堆 2.线程独占区:虚拟机栈,本 ...
- PHP中预定义超全局数组（变量）
PHP中许多预定义变量都是“超全局的”,这意味着它们在一个脚本的全部作用域中都可用.超全局变量除了具有全局变量特点外,在函数或方法中无需执行global $variable:就可以访问它们. 提供超全 ...
- NTP搭建指南
NTP搭建指南 前言: NTP是网络时间协议(Network Time Protocol),用于全球的标准时间(UTC)的校正. 一般NTP 服务有不同的层次:一层是源头NTP 服务器,一层服务器都设 ...
- 集成 jpush-react-native 常见问题汇总 （iOS 篇）
给 iOS 应用添加推送功能是一件比较麻烦的事情,本篇文章收集了集成 jpush-react-native 的常见问题,目的是为了帮助用户更好地排查问题 1. 收不到推送 确保是在真机上测试,而不是在 ...
- [译文]casperjs使用说明-选择器
casperjs的选择器可以在dom下工作,他既支持css也支持xpath. 下面所有的例子都基于这段html代码: <!doctype html> <html> <he ...
- origin显示三维曲面
准备数据并选中数据: 这里如果只关心z<1部分的趋势,可以对Z轴范围进行调整,双击Z轴的数字: 然后修改显色条的范围,双击曲面: 最后让曲面最上面部分clip掉: 成功了:
- google浏览器安装不上的绝望经历
手贱把google的一些文件删除了,整个浏览器都没法打开 决定重装下,但是连卸载的功能都无法打开了 于是决定上网重新下载了个安装包,发现安装包都打不来 很绝望,查了很多资料 很多人说要删除注册表的东西 ...