JS弹出层制作，以及移动端禁止弹出层下内容滚动，overflow:hidden移动端失效问题

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();
                            }
                }
            })
        }