1. 程式人生 > >移動端h5頁面彈窗出來後,禁止底層的背景頁滾動

移動端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%也是必須的。
有用請點個贊,謝謝!!!