移动端穿透问题

附上完整的解决方案参考链接（http://www.imooc.com/article/283472）

在弹出层加一个父级元素遮罩层，阻止滚动事件，但是问题是遮罩层所有子元素（弹出层）也不能滚动。

方法一：那么平级设置mask，绑定事件-》虽然滚动mask，页面没有穿透滚动问题，但是当弹出层滚动到头继续拉时页面会滚动

方法二：弹出时body设置overflow:hidden，真机上面需要加上position:fixed,由于给了fixed定位，页面会弹上最顶部，然后记录当前高度，弹出层消失时还原body设置。但是页面顶部的banner图片会受到压缩，变形？？

方法三：最终使用的是自己通过touchmove，touchstart，touchend等方法模拟滚动，缺点是没有手机原生的滚动顺滑。

实现代码如下

var endpst = {}, //结束位置
            elepst= {}, 
            start={}; //初始位置
        var maxTop =  $('.content').height()-$('.contents').height();
        $('.contents').on('touchstart', function(event) {
            if(event.targetTouches.length > 1) return;
                var touch = event.targetTouches[0],
                    style = window.getComputedStyle(this, null);// 当前元素的css 样式
 
                    start = {y: touch.clientY};
                    elepst = { 
                        y: parseFloat(style.getPropertyValue('top')),
                    };

        })
        $('.contents').on('touchmove', function(event) {
            if(event.targetTouches.length > 1) return;
                
                var touch = event.targetTouches[0],
                    offset = { y : touch.clientY - start.y }; //手移动的 偏移位置
 
                endpst['top'] = (elepst.y + offset.y)<maxTop?maxTop:(elepst.y+offset.y);
                endpst['top'] =  endpst['top']> 0? 0 :endpst['top'];
                this.style.top = endpst.top + 'px';
        })
        $('.contents').on('touchend', function(e) {
            if(e.targetTouches.length > 1) return;

        })

其中还遇见一个小bug：为什么页面的遮罩绑定的click事件pc端可以但是苹果手机上不生效，原因是：（参考链接：https://blog.csdn.net/littlebearGreat/article/details/79096520）

按照标签的语义化，button标签是用来点击的。而div,自己体会哈。

给div加个属性  cursor:pointer;

在苹果设备上onclick就有效了