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 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...
随机推荐
- await Task传异步Lambda问题
微软在.NET4.5中升级了C#语言到5.0,加入了await和async语法,极大地方便了广大开发人员的异步编程,也是为了和WinRT API配套,因为这套API充满了异步编程. 在开发过程中发现有 ...
- C++ 控制台编程
播放媒体文件 #include<windows.h> #program <mmsystem.h> #pragma comment(lib,"winmm.lib&quo ...
- 基于GOJS绘制流程图
基于GOJS封装的流程图设计(展示)工具类,主要分为两个工具类: 工具库依赖于go.js.jquery以及layer.js http://gojs.net/ http://jquery.com/ ht ...
- C#连接SQL server数据库
C#连接SQL server数据库 创建一个Windows应用程序,在窗体中添加TextBox控件.Button控件.Label控件. private void button1_Click(objec ...
- 得到windows聚焦图片（windows 10）
有些Windows聚焦图片确实很漂亮,很希望保留下来,但是Windows聚焦图片总更好,网上有得到聚焦图片的方法,每次都手动去弄真麻烦,于是自己编了一个小程序,自动得到Windows聚焦图片,下面是运 ...
- Delphi32位程序拷贝system32目录中文件解决方法！
源码下载:http://download.csdn.net/detail/sunylat/9740352 unit Unit1; interface uses Winapi.Windows, Wina ...
- [agc004f]Namori 贪心
Description 现在给你一张NN个点MM条边的连通图,我们保证N−1≤M≤NN−1≤M≤N,且无重边和自环. 每一个点都有一种颜色,非黑即白.初始时,所有点都是白色的. 想通过执行 ...
- scrapy框架基于CrawlSpider的全站数据爬取
引入 提问:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调parse方法). 方法 ...
- Linux 下 SSH 远程超时解决方案
Linux 下 SSH 远程超时解决方案 今天突然看到一个问题说是如何解决SSH远程超时的问题. 找了一点资料.用于解决这个需求~ 第一种:OpenSSH 配置文件设置 位于112行的 "C ...
- POJ3076 Sudoku
POJ3076 Sudoku 本题为16*16宫格 剪枝见代码 #include <cstdio> #include <iostream> #include <algor ...