沐鳴代理:_移動端滾動穿透問題解決方案

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

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過去就可以了。

原文:https://segmentfault.com/a/1190000022614730

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/8957