现在有一个在wap网页上面的需求,就是点击用户相册的时候,弹出一个html层显示头像,再加上个半透明遮罩层,当用户滚动页面的时候,背景页面不能滚动,当用户再次点击图片隐藏弹框层后,页面恢复滚动,所有用了下面这种方式实现:
这里只概括主要功能实现的js代码
首先要写一个闭包方法:
var event_f = function(e){e.preventDefault();}
这个方法下面监听要用到,当点击弹出层的时候执行此监听,屏蔽掉用户的滚动事件,那用户滚动的时候,背景页面就不会动了
document.body.addEventListener('touchmove', event_f, false);
当用户点击图片,弹框层消失后,需要恢复滚动事件,只需要移除对上面的监听就可以了
document.body.removeEventListener('touchmove', event_f, false);