移動端滾動穿透問題解決方案

移動端有可滾動的彈窗確定會遇到的問題，滑動彈層背景跟着滾動，若是彈窗裏面的內容不須要滾動的能夠直接粗暴的把滾動事件禁用掉，可是若是彈窗內容過多須要滾動那就不能夠這樣作。如下這個解決辦法在線上使用沒有問題，能夠大膽拿去用。

• vue的解決辦法

isShowDialog是控制彈窗顯示的，監聽isShowDialog的改變，對watch使用不明白的能夠去看vue偵聽器，

watch：{
// 若是 ` isShowDialog` 發生改變，這個函數就會運行,第一個參數是isShowDialog最新的值
    isShowDialog（val){
        this.scrollForbid(val)
    }
}

scrollForbid(val) {
    let body = document.body
    if（val){
        // 彈窗顯示的時候
        this.scrollTop = window.scrollY
        body.style.width = '100%'
        body.style.position = 'fixed'
        body.style.top = -this.scrollTop + 'px'
    } else {
        // 彈窗關閉
        body.style.width = ''
        body.style.position = ''
        body.style.top = ''
        window.srcollTo(0,this.scrollTop)
    }
}

• 原生js解決辦法

若是用原生來寫的話調用scrollForbid(val)方法，禁止滾動的時候傳true，解除滾動傳false過去就能夠了。