网站地图    收藏   

主页 > 采坑 > 前端采坑 > javascript常见API采坑 >

ios(safari)浏览器滚动效果滑动卡顿,闪烁问题解决

来源:未知    时间: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

添加评论