html5中弹窗内容滚动问题解析

有大量前端开发工具及学习资料，可以搜群【 web前端学习部落22群 】进行下载，遇到学习问题也可以问群内专家以及课程老师哟

最近在做一个layer组件，基于jQuery，主要针对移动端，在做的过程中遇到一个场景：

1、当弹出层出现时，底部body是禁止滑动的

2、档弹出层中内容出现滚动条时，可以滚动，同时禁用body层

解决第一个问题好办，利用event.preventDefault()可以阻止浏览器中body滑动的默认动作，

在弹窗(layer)显示出来时，只需

function preventDefault(e) {

        e = e || window.event;

        e.preventDefault && e.preventDefault();

        e.returnValue = false;

    }

document.body.addEventListerner('touchmove',preventDefault,false)

就可以阻止body的滑动，第一个问题解决。

 

主要在第二个问题，当阻止了body的默认滑动，如果弹出层中内容有滚动条时，就滑不动了，当然我们可以模拟

第一个问题的方法对滚动区域做一个监听事件：

$(_alertBodyObj)[0].addEventListener('touchmove', function(e){

document.body.removeEventListener('touchmove',preventDefault,false);

})

 

$(_alertBodyObj)[0].addEventListener('touchend', function(e){

document.body.addEventListener('touchmove',preventDefault,false);

})

即在滚动开始时，取消body的禁止默认事件，滚动结束时重新添加阻止默认滑动动作。

 

好像问题解决了，仔细滑动会发现，当layer中的滚动条滑动到最顶端和最低端时，依然会带动body的默认滑动事件，

这里，我们需要对上面的方法做进一步的优化：

var _alertBodyObj = $(_targetObj).find('.alert-body');

            var disableScroll = function(){

 

                $(document).on('touchmove', preventDefault);

            };

            var enableScroll = function(){

               

                $(document).off('touchmove', preventDefault);

            };

 

            // 外部禁用

            disableScroll();

 

            // 移动端touch重写

            var startX, startY;

            $(_alertBodyObj)[0].addEventListener('touchstart', function(e){

                startX = e.changedTouches[0].pageX;

                startY = e.changedTouches[0].pageY;

            },false);

 

            // 仿innerScroll方法

            $(_alertBodyObj)[0].addEventListener('touchmove', function(e){

                e.stopPropagation();

 

                var deltaX = e.changedTouches[0].pageX - startX;

                var deltaY = e.changedTouches[0].pageY - startY;

 

                // 只能纵向滚

                if(Math.abs(deltaY) < Math.abs(deltaX)){

                    e.preventDefault();

                    return false;

                }

 

                var box = $(this).get(0);

                if($(box).height() + box.scrollTop >= box.scrollHeight){

                    if(deltaY < 0) {

                        e.preventDefault();

                        return false;

                    }

                }

                if(box.scrollTop === 0){

                    if(deltaY > 0) {

                        e.preventDefault();

                        return false;

                    }

                }

 

            },false);

我们在监听滚动同时去判断滚动条是否在最顶端或者最下端，此时阻止浏览器默认动作，这样问题就迎刃而解了。

有大量前端开发工具及学习资料，可以搜群【 web前端学习部落22群 】进行下载，遇到学习问题也可以问群内专家以及课程老师哟