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);
}
最新文章
- java在线支付
- C#中字典集合HashTable、Dictionary、ConcurrentDictionary三者区别
- 关于VS打开cshtml出现 未能完成该操作。无效指针
- js定时相关函数:
- 2015弱校联盟(1) - B. Carries
- jquery实现拖拽以及jquery监听事件的写法
- c#中的delegate(委托)和event(事件)
- UIView转场动画属性设置
- SPRING IN ACTION 第4版笔记-第一章-005-Bean的生命周期
- Java基础知识强化之网络编程笔记08:TCP之客户端键盘录入服务器控制台输出
- 利用ssh传输文件 分类: 服务器搭建 Raspberry Pi 2015-04-12 18:47 58人阅读 评论(0) 收藏
- c++封装性
- openstack之horizon源码分析之二
- OpenCV学习 6:平滑滤波器 cvSmooth()——2
- Unity3d物体模型(实现旋转缩放平移自动旋转)
- Python学习笔记 - 生成器generator
- Hexo主题yilia增加gitalk评论插件
- ODS ,EDW,DM
- Django ORM queryset object 解释(子查询和join连表查询的结果)
- mysql错误日志