原文链接:https://www.haorooms.com/post/webapp_bodyslidebcdiv
下图是截取了项目部分图片~左边白色区域是从左侧滑出的菜单栏,右边灰色区域是遮罩层;
当左边用户中心白色区域菜单过多,或者是手机屏幕过小出现滚动条的时候,在其表层滑动时,底层部分body也会跟着滑动~
解决方法:
1、该区域没有滚动条:
最直接的办法,禁止表层滑动,如果该区域有滚动条也无法再继续往下滑动
//设置顶栏禁止滑动
$('div.col-xs-6').bind("touchmove", function (e) {
e.preventDefault();
});
//设置遮罩层禁止滑动
$("#mask").bind("touchmove", function (e) {
e.preventDefault();
});
2、该区域有滚动条:
滚动轴滚到底部的时候,会触发body的滑动,那么就需要在事件滚到底部的时候对表层的div做一个touchmove的阻止。到达滚动轴底部,向下滑动,阻止事件,向上滑动,开启事件。为此就要判断touchmove的方向了(参考haorooms前端博客)
//解决侧边栏滑动,导致底层body滑动(touchmove的阻止)
var startX,startY;
$("aside.float-navigation").bind("touchstart", function (events) {
startX = events.originalEvent.changedTouches[0].pageX,
startY = events.originalEvent.changedTouches[0].pageY;
});
//获得顶部栏的高度
var topHeight = $('div.top-bar').height();
//获得当前可视窗口高度
var clientHeight = $(window).height();
$("aside.float-navigation").on("touchmove",".nano-content", function (events) {
var ulHeight = $(this).children().height();
var scrollTop = $(this).scrollTop();
var scrollheight = $(this)[0].scrollHeight;
if(topHeight + ulHeight <= clientHeight){
event.preventDefault();
}else{
if (clientHeight + scrollTop >= scrollheight ) { //滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。
$(".nano-content").bind("touchmove", function (event) {
var moveEndX = event.originalEvent.changedTouches[0].pageX,
moveEndY = event.originalEvent.changedTouches[0].pageY;
var theX = moveEndX - startX,
theY = moveEndY - startY;
if (Math.abs(theY) > Math.abs(theX) && theY > 0) { //判断上滑还是下滑!
$(".nano-content").unbind("touchmove");//滑动到底部再往上滑动,解除阻止!
}
if (Math.abs(theY) > Math.abs(theX) && theY < 0) {
event.preventDefault();//滑动到底部,再往下滑动,阻止滑动!
}
})
}
if (scrollTop < 20) {//滚到顶部20px左右
$(".nano-content").bind("touchmove", function (event) {
var moveEndX = event.originalEvent.changedTouches[0].pageX,
moveEndY = event.originalEvent.changedTouches[0].pageY;
var theX = moveEndX - startX,
theY = moveEndY - startY;
if (Math.abs(theY) > Math.abs(theX) && theY > 0) {
event.preventDefault();//滑动到顶部,再往上滑动,阻止滑动!
}
if (Math.abs(theY) > Math.abs(theX) && theY < 0) {
$(".nano-content").unbind("touchmove");
}
})
}
}
});
使用了以上方法基本上能够阻止body的滚动。但并不是最完美的,有时候还是会有问题~
另外张鑫旭大神也有一种解决办法: