欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2023年07月28日 10:11:58   作者：吃和遠(yuǎn)方  
這篇文章主要為大家介紹了js解決移動端滾動穿透問題方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

移動端有可滾動的彈窗肯定會遇到的問題，滑動彈層背景跟著滾動，如果彈窗里面的內(nèi)容不需要滾動的可以直接粗暴的把滾動事件禁用掉，但是如果彈窗內(nèi)容過多需要滾動那就不可以這樣做。

更正（只適合白色背景的頁面！只適合白色背景的頁面！只適合白色背景的頁面！因?yàn)橛袝r(shí)候會出現(xiàn)閃白！我也沒有找到完美解決滾動穿透的辦法）

vue的解決辦法

isShowDialog是控制彈窗顯示的，監(jiān)聽isShowDialog的改變，對watch使用不明白的可以去看vue偵聽器

watch：{
// 如果 ` isShowDialog` 發(fā)生改變，這個(gè)函數(shù)就會運(yùn)行,第一個(gè)參數(shù)是isShowDialog最新的值
    isShowDialog（val){
        this.scrollForbid(val)
    }
}
scrollForbid(val) {
    let body = document.body
    if（val){
        // 彈窗顯示的時(shí)候
        this.scrollTop = window.scrollY
        body.style.width = '100%'
        body.style.position = 'fixed'
        body.style.top = -this.scrollTop + 'px'
    } else {
        // 彈窗關(guān)閉
        body.style.width = ''
        body.style.position = ''
        body.style.top = ''
        window.srcollTo(0,this.scrollTop)
    }
}

原生js解決辦法

如果用原生來寫的話調(diào)用scrollForbid(val)方法，禁止?jié)L動的時(shí)候傳true，解除滾動傳false過去就可以了。

以上就是js解決移動端滾動穿透問題方案詳解的詳細(xì)內(nèi)容，更多關(guān)于js移動端滾動穿透的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • Electron 剪貼板實(shí)現(xiàn)示例詳解

    Electron 剪貼板實(shí)現(xiàn)示例詳解

    這篇文章主要為大家介紹了Electron 剪貼板實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-03-03
  • 前端必會的package.json創(chuàng)建及常見屬性用法示例詳解

    前端必會的package.json創(chuàng)建及常見屬性用法示例詳解

    這篇文章主要為大家介紹了前端必會的package.json創(chuàng)建及常見屬性用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • 微信小程序登錄態(tài)控制深入分析

    微信小程序登錄態(tài)控制深入分析

    這篇文章主要介紹了微信小程序登錄態(tài)控制深入分析的相關(guān)資料,需要的朋友可以參考下
    2017-04-04
  • 微信小程序 MD5加密登錄密碼詳解及實(shí)例代碼

    微信小程序 MD5加密登錄密碼詳解及實(shí)例代碼

    這篇文章主要介紹了微信小程序 MD5加密登錄密碼詳解及實(shí)例代碼的相關(guān)資料,這里附有實(shí)例代碼，需要的朋友可以參考下
    2017-01-01
  • JavaScript實(shí)際應(yīng)用：innerHTMl和確認(rèn)提示的使用

    JavaScript實(shí)際應(yīng)用：innerHTMl和確認(rèn)提示的使用

    JavaScript實(shí)際應(yīng)用：innerHTMl和確認(rèn)提示的使用...
    2006-06-06
  • 前端 JavaScript運(yùn)行原理

    前端 JavaScript運(yùn)行原理

    這篇文章主要介紹了前端 JavaScript運(yùn)行原理，JavaScript引擎是一個(gè)計(jì)算機(jī)程序，它的主要作用是JavaScript運(yùn)行時(shí)將源碼編譯為機(jī)器碼。每個(gè)主流Web瀏覽器都有自己的JavaScript引擎，它通常由web瀏覽器供應(yīng)商開發(fā)，接下來一起來看看文章的詳細(xì)內(nèi)容吧
    2021-10-10
  • umi插件開發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)基礎(chǔ)路由解析

    umi插件開發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)基礎(chǔ)路由解析

    這篇文章主要為大家介紹了umi插件開發(fā)仿dumi項(xiàng)目實(shí)現(xiàn)基礎(chǔ)路由解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-01-01
  • 微信小程序中setInterval的使用方法

    微信小程序中setInterval的使用方法

    這篇文章主要介紹了微信小程序中setInterval的使用方法的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下
    2017-09-09
  • 淺談JavaScript作用域

    淺談JavaScript作用域

    這篇文章主要介紹了JavaScript作用域詳情,作用域的使用提高了程序邏輯的局部性，增強(qiáng)了程序的可靠性，減少了名字沖突,下面文章我們一起來了解更多的詳細(xì)內(nèi)容，需要的小伙伴也可以參考一下
    2021-12-12
  • JQ中$(window).load和$(document).ready區(qū)別與執(zhí)行順序

    JQ中$(window).load和$(document).ready區(qū)別與執(zhí)行順序

    JQ中的$(document).ready()大家應(yīng)該用的非常多，基本每個(gè)JS腳本中都有這個(gè)函數(shù)的出現(xiàn)有時(shí)甚至?xí)霈F(xiàn)多個(gè)，那么另一個(gè)加載函數(shù)$(window).load相對出現(xiàn)的次數(shù)就很少了，下面為大家介紹一下兩者的區(qū)別與他們的執(zhí)行順序
    2017-03-03

最新評論