主页 > 采坑 > 前端采坑 > javascript常见API采坑 >
来源:未知 时间:2021-05-24 17:12 作者:小飞侠 阅读:次
[导读] ios(safari)浏览器滚动效果滑动卡顿,闪烁问题解决 滑动卡顿: html,body{width:100%;height:100%;}*{-webkit-overflow-scrolling:touch;}设置-webkit-overflow-scrolling:touch;则可以解决大部分问题 橡皮筋效果:...
|
ios(safari)浏览器滚动效果滑动卡顿,闪烁问题解决 滑动卡顿: html,body{
width:100%;
height:100%;
}
*{
-webkit-overflow-scrolling: touch;
}
设置 -webkit-overflow-scrolling: touch;则可以解决大部分问题橡皮筋效果: var startY, endY; // 记录滑动的开始Y坐标和当前Y坐标
$('body').bind('touchstart', function (e) {
startY = e.originalEvent.changedTouches[0].pageY;
});
// 禁用手机默认的触屏滚动行为
$('body').bind('touchmove', function (e) {
console.log("touchmove");
if (!$(e.target).is($('.mobi_DbodyBox')) && !$(e.target).parents('.mobi_DbodyBox').length > 0) {
e.preventDefault();
}
else {
checkScroll(e);
}
});
function checkScroll(e) {
console.log("check");
endY = e.originalEvent.changedTouches[0].pageY;
// 若已经移到页面最上方,则不允许再向下滑动
if ($('.mobi_DbodyBox').scrollTop() == 0 && endY > startY) {
e.preventDefault();
}
// 若已经移到页面最下方,则不允许再向上滑动
if ($('.mobi_DbodyBox').scrollTop() + $('.mobi_DbodyBox').height() == $('.mobi_DbodyBox')[0].scrollHeight && endY < startY) {
e.preventDefault();
}
}若直接在body上 e.preventDefault();会把浏览器所有滑动全部阻止,则需要根据判断其是否需要阻止默认行为。 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com