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

最近在做一个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);

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

扫描二维码查看演示： 

event.preventDefault()阻止默认事件行为的触发。

event.stopPropagation()防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。