js解決移動端滾動穿透問題方案詳解
更新時間：2023年07月28日 10:11:58 作者：吃和遠方
這篇文章主要為大家介紹了js解決移動端滾動穿透問題方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
引言
移動端有可滾動的彈窗肯定會遇到的問題，滑動彈層背景跟著滾動，如果彈窗里面的內容不需要滾動的可以直接粗暴的把滾動事件禁用掉，但是如果彈窗內容過多需要滾動那就不可以這樣做。
更正（只適合白色背景的頁面！只適合白色背景的頁面！只適合白色背景的頁面！因為有時候會出現閃白！我也沒有找到完美解決滾動穿透的辦法）
vue的解決辦法
isShowDialog是控制彈窗顯示的，監(jiān)聽isShowDialog的改變，對watch使用不明白的可以去看vue偵聽器
watch：{
// 如果 ` isShowDialog` 發(fā)生改變，這個函數就會運行,第一個參數是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)方法，禁止?jié)L動的時候傳true，解除滾動傳false過去就可以了。
以上就是js解決移動端滾動穿透問題方案詳解的詳細內容，更多關于js移動端滾動穿透的資料請關注腳本之家其它相關文章！
您可能感興趣的文章:
相關文章
這篇文章主要為大家介紹了Electron 剪貼板實現示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
前端必會的package.json創(chuàng)建及常見屬性用法示例詳解
這篇文章主要為大家介紹了前端必會的package.json創(chuàng)建及常見屬性用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要介紹了微信小程序登錄態(tài)控制深入分析的相關資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了微信小程序 MD5加密登錄密碼詳解及實例代碼的相關資料,這里附有實例代碼，需要的朋友可以參考下2017-01-01
JavaScript實際應用：innerHTMl和確認提示的使用
JavaScript實際應用：innerHTMl和確認提示的使用...2006-06-06
這篇文章主要介紹了前端 JavaScript運行原理，JavaScript引擎是一個計算機程序，它的主要作用是JavaScript運行時將源碼編譯為機器碼。每個主流Web瀏覽器都有自己的JavaScript引擎，它通常由web瀏覽器供應商開發(fā)，接下來一起來看看文章的詳細內容吧2021-10-10
這篇文章主要為大家介紹了umi插件開發(fā)仿dumi項目實現基礎路由解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了微信小程序中setInterval的使用方法的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了JavaScript作用域詳情,作用域的使用提高了程序邏輯的局部性，增強了程序的可靠性，減少了名字沖突,下面文章我們一起來了解更多的詳細內容，需要的小伙伴也可以參考一下2021-12-12
JQ中$(window).load和$(document).ready區(qū)別與執(zhí)行順序
JQ中的$(document).ready()大家應該用的非常多，基本每個JS腳本中都有這個函數的出現有時甚至會出現多個，那么另一個加載函數$(window).load相對出現的次數就很少了，下面為大家介紹一下兩者的區(qū)別與他們的執(zhí)行順序2017-03-03