DoraCMS

您现在的位置是:首页>文档内容页

文档详情

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

doramart 2016-06-07 15:58:36 技巧228524
最近在做一个layer组件,基于jQuery,主要针对移动端,在做的过程中遇到一个场景: 1、当弹出层出现时,底部body是禁止滑动的 2、档弹出层中内容出现滚动条时,可以滚动,同时禁用body层

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

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

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


layer1.jpg


解决第一个问题好办,利用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);


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


扫描二维码查看演示:layerDemo.png 


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

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


文章评论

取消回复
登录 参与评论

评论列表(