有大量前端开发工具及学习资料,可以搜群【 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群 】进行下载,遇到学习问题也可以问群内专家以及课程老师哟