主页 > 采坑 > 前端采坑 > 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