手机端遮罩层禁止滚动，阻止穿透滑动

现在手机端常常有类似于app的全屏弹窗或者遮罩弹窗，但是会遇到一个棘手的问题：

当位于弹窗或者遮罩底层的内容出现滚动条时，滑动弹窗或者遮罩会同时滚动底层的内容，即穿透滑动。

如何防止穿透滑动呢？

第一种方法，当弹窗显示时，去除底部的滚动条；当弹窗关闭时，再次显示滚动条.

//显示弹窗
$('.js-popup').click(function(){
    $('.mask').show();
    var wHeight = $(window).height();
    $('html').css({'height':wHeight,'overflow':'hidden'});
    $('body').css({'height':wHeight,'overflow':'hidden'});
});
//关闭弹窗
$('.js-close-popup').click(function(){
    $('html,body').removeAttr('style');
    $('.mask').hide();
})

但是，这样会有一个问题，滚动条去除后，内容会返回顶部。对于用户来说，这肯定是一个糟糕的设计。用户反馈说，哪个煞笔设计的？

为了不当煞笔，我们只好绞尽脑汁了。其实，可以记录显示弹窗之前，滚动所在的位置，关闭弹窗时，再重置滚动条的位置。

//显示弹窗
$('.js-popup').click(function(){
        window.lastScrollTop = sTop = document.body.scrollTop || document.documentElement.scrollTop;
    $('.mask').show();
    var wHeight = $(window).height();
    $('html').css({'height':wHeight,'overflow':'hidden'});
    $('body').css({'height':wHeight,'overflow':'hidden'});
});
//关闭弹窗
$('.js-close-popup').click(function(){
    $('html,body').removeAttr('style');
    $(window).scrollTop(window.lastScrollTop);
    $('.mask').hide();
})

第二种方法，使用IScroll.js，通过CSS3 transform控制滚动

var myScroll= new IScroll('#mask', {mouseWheel: true,click:true});

但使用IScroll.js也会有一个问题，会影响表单内的元素，比如input不能输入、无法选择文件等等问题。

暂时只有这两种方案，实现项目中，这两种方案都会采用，有input的弹窗，采用第一种，没有弹窗的，采用第二种。