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();会把浏览器所有滑动全部阻止,则需要根据判断其是否需要阻止默认行为。

你可能感兴趣的:(web前端,ios,js技巧)