移动端如何禁用底层的滚动事件，保证弹出层的滚动事件正常运行

今天做移动端项目时遇到的一个问题，带来了不少麻烦。

pc端的常用方法是 ：

$('body').css({
    overflow: 'hidden',
    height: $(window).height() + 'px'
})
// 因为body的高度等于了window的高度,所以滚动自然就无法进行了,如果需要滚动了,只需要把高度从style标签上面移除就好了

但在移动端是不生效的，这个也是大家说的滚动穿透问题：

百度了很多大神的Demo终于会走到解决方法：下面是个人项目部分代码

-----------css------------

.modal-open{
    position: fixed;
    width: 100%;
}

-------------js-----------

 //产品弹出详情页
    $('.pro').each(function () {
//        console.log(this);
        $(this).on('click', function () {
            $('#maskbody').fadeIn();
            scrollTop = document.scrollingElement.scrollTop;
            $('body').addClass('modal-open');
            document.body.style.top = -scrollTop + 'px';
        });
    });
    $('#colse').on('click',function () {
        $('#maskbody').fadeOut();
       $('body').removeClass('modal-open');
        document.scrollingElement.scrollTop = scrollTop;
    })

更多可以参考一下链接：

https://uedsky.com/demo/modal-scroll.html