ios（safari）浏览器滑动卡顿，橡皮筋效果解决

- 日理万妓 2022-03-16 00:19 1070阅读 0赞

滑动卡顿：

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