移动端h5页面弹窗出来后，禁止底层的背景页滚动

先看图：



再需求和解决方法：
1.需求：在一个可上下滑动的h5-index.html中，弹出一个固定于设备高度的奖励层。当奖励层弹出来之后：1.index页面不能出现滚动条，2.index不能自动置顶，要停留在触发事件的位置。
2.解决方法：
a.初始的css设置：

html,body {
    width: 100%;
    height:100%;
    overflow: scroll;
}

b.触发奖励层事件时，即点击‘领取奖励’时:

    //点击领取奖励
    $('.btn-getgift').on('click',function(){
        $('body').css({
         "overflow": "hidden",
         "height":'100%'
        })
        $('html').css({
         "overflow": "hidden",
         "height":'100%'
        })
        $(".alertGift2").removeClass('hide');
    })

c.关闭奖励层时:

 //关闭奖励弹窗
    $('.btn-close,.btn-confirm').on('click',function(){
        $(".alertGift").addClass('hide');
        $('body').css({
         "overflow": "scroll"
        })
        $('html').css({
         "overflow": "scroll"
        })
    })

主要思路：overflow中的scroll和hidden两个属性的切换，不过body和html的高度设置为100%也是必须的。
有用请点个赞，谢谢！！！