js解決移動端滾動穿透問題方案詳解
更新時間：2023年07月28日 10:11:58 作者：吃和遠方
這篇文章主要為大家介紹了js解決移動端滾動穿透問題方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
引言
移動端有可滾動的彈窗肯定會遇到的問題，滑動彈層背景跟著滾動，如果彈窗里面的內(nèi)容不需要滾動的可以直接粗暴的把滾動事件禁用掉，但是如果彈窗內(nèi)容過多需要滾動那就不可以這樣做。
更正（只適合白色背景的頁面！只適合白色背景的頁面！只適合白色背景的頁面！因為有時候會出現(xiàn)閃白！我也沒有找到完美解決滾動穿透的辦法）
vue的解決辦法
isShowDialog是控制彈窗顯示的，監(jiān)聽isShowDialog的改變，對watch使用不明白的可以去看vue偵聽器
watch：{
// 如果 ` isShowDialog` 發(fā)生改變，這個函數(shù)就會運行,第一個參數(shù)是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解決辦法
如果用原生來寫的話調(diào)用scrollForbid(val)方法，禁止?jié)L動的時候傳true，解除滾動傳false過去就可以了。
以上就是js解決移動端滾動穿透問題方案詳解的詳細內(nèi)容，更多關于js移動端滾動穿透的資料請關注腳本之家其它相關文章！
您可能感興趣的文章:
相關文章
umi插件開發(fā)仿dumi項目實現(xiàn)markdown文件轉(zhuǎn)為頁面
這篇文章主要介紹了umi插件開發(fā)仿dumi項目實現(xiàn)markdown文件轉(zhuǎn)為頁面方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了在web?worker中使用fetch實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要為大家介紹了JS圖形編輯器之場景坐標視口坐標的相互轉(zhuǎn)換示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了微信小程序 條件渲染的相關資料,并附簡單實例代碼，需要的朋友可以參考下2016-10-10
微信小程序 動態(tài)的設置圖片的高度和寬度詳解及實例代碼
這篇文章主要介紹了微信小程序 動態(tài)的設置圖片的高度和寬度詳解及實例代碼的相關資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了關于前端JavaScript中的ES6，ES6是一個泛指，含義是 5.1 版以后的 JavaScript 的下一代標準，涵蓋了 ES2015、ES2016、ES2017語法標準，ES6新特性目前只有在一些較新版本瀏覽器得到支持，老版本瀏覽器里面運行我們需要將ES6轉(zhuǎn)換為ES52021-10-10
JS實現(xiàn)刷新網(wǎng)頁后之前瀏覽位置保持不變示例詳解
這篇文章主要為大家介紹了JS實現(xiàn)刷新網(wǎng)頁后之前瀏覽位置保持不變示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序 MINA文件結構的相關資料,這里詳細介紹了微信小程序的文件目錄及文件作用，需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了TS 類型收窄教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
本篇文章主要介紹了詳解微信小程序入門五: wxml文件引用、模版、生命周期，具有一定的參考價值，有興趣的可以了解一下。2017-01-01