HTML
<div class="layer">
<div class="menu-list">
<span>社会</span>
<span>历史</span>
<span>军事</span>
<span>娱乐</span>
<span>电影</span>
<span>财经</span>
<span>体育</span>
<span>科技</span>
<span>手机</span>
<span>健康</span>
<span>情感</span>
<span>亲子</span>
</div>
</div>
CSS
.preHander{
overflow: hidden;
}
当设置背景层内容overflow:hidden的时候在PC端和模拟器上的有的，但是到的安卓、IOS真机运行的时候失效！
JS
$('.menu').click(function(){
$('.layer').show()
var scroTop=$(document).scrollTop() //滚动条距离顶部的位置
$('.layer').css('top',scroTop+'px') //弹出框顶部位置
$('.menu-list').css('z-index','9999')
$('html,body').addClass('preHander') //禁止弹出框下面内容滚动，但是在真机运行失效// 添加触摸监听事件，如果手指触摸到阴影区域，弹出层消失！
document.addEventListener('touchstart',touch, false)
function touch(event){
var event=event || window.event;
if(!$(event.target).is($('.menu-list'))&&$(event.target).parent('.menu-list').length===){
$(".layer").hide();
$('html,body').removeClass('preHander') //解除弹出框下面内容滚动
}
}
})
所以为了禁止弹出层下内容的滚动，必须要禁止滑动事件传递到下一层，所以要防止滑动事件冒泡
// 当弹出层出现的时候，禁止弹出层背景层滑动，阻止事件传递冒泡
function move(e){
e.preventDefault();//禁止事件冒泡
}
当弹出层出现的时候
// 当弹出层出现的时候，禁止弹出层背景层滑动，阻止事件传递冒泡
function move(e){
e.preventDefault();//禁止事件冒泡
}
$('.layer').on('touchmove',move, false)//弹出层出现，弹出层的背景层阻止默认滑动事件
所以最后的JS应该是
// 点击菜单函数封装=========================================================
function menushow(){
$('.menu').click(function(){
$('.layer').show()
var scroTop=$(document).scrollTop() //滚动条距离浏览器顶部的位置
$('.layer').css('top',scroTop+'px') //弹出框顶部相对于浏览器的位置，就是在可视窗口的顶部
$('.menu-list').css('z-index','')
// 当弹出层出现的时候，禁止弹出层背景层滑动，阻止事件传递冒泡
function move(e){
e.preventDefault();//禁止事件冒泡
}
$('.layer').on('touchmove',move, false)//弹出层出现，弹出层的背景层阻止默认滑动事件
// 添加触摸监听事件，如果手指触摸到阴影区域，弹出层消失！
document.addEventListener('touchstart',touch, false)
function touch(event){
var event=event || window.event;
if(!$(event.target).is($('.menu-list'))&&$(event.target).parent('.menu-list').length===){
$(".layer").hide();
}
}
})
}