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===0){ $(".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','9999') 
            // 當彈出層出現的時候，禁止彈出層背景層滑動，阻止事件傳遞冒泡
                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===0){
                                $(".layer").hide(); 
                            }
                }
            })
        }