国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

跳出彈窗頁面禁止?jié)L動(dòng)（PC端和手機(jī)端）

HmyBmny / 1419人閱讀

摘要：端如何實(shí)現(xiàn)當(dāng)彈窗顯示時(shí)，為元素添加屬性當(dāng)關(guān)閉彈窗時(shí)移除該屬性即可在彈窗的上設(shè)置你要顯示的內(nèi)容出現(xiàn)彈窗時(shí)，為元素添加，這樣主頁面就禁止滑動(dòng)，同時(shí)很好地解決了彈窗穿透的問題。由于無法取消，因此事件監(jiān)聽器無法阻止頁面呈現(xiàn)。

pc端如何實(shí)現(xiàn)

1.當(dāng)彈窗顯示時(shí)，為body元素添加屬性：overflow：hidden, 當(dāng)關(guān)閉彈窗時(shí)移除該屬性即可
2.在彈窗的div上設(shè)置 @scroll.stop.prevent


 你要顯示的內(nèi)容

3.出現(xiàn)彈窗時(shí)，為body元素添加position:fixed，這樣主頁面就禁止滑動(dòng)，同時(shí)很好地解決了彈窗穿透的問題。
若彈窗為獨(dú)立組件，可以采用如下代碼：

beforeMount() {
    // 獲取原來的scrollTop 并將body的top修改為對(duì)應(yīng)的值
    this.prevBodyStyle_scrollTop = document.body.scrollTop || document.documentElement.scrollTop
    this.prevBodyStyle_top = window.getComputedStyle(document.body, null).getPropertyValue("top")
    document.body.style.top = `-${this.prevBodyStyle_scrollTop}px`
    // 獲取原來body的position 為了解決iOS上光標(biāo)漂移的問題 將position修改為fixed
    this.prevBodyStyle_position = window.getComputedStyle(document.body, null).getPropertyValue("position")
    document.body.style.position = "fixed"
    // 為了避免width空值的情況
    this.prevBodyStyle_width = window.getComputedStyle(document.body, null).getPropertyValue("width")
    document.body.style.width = "100%"
  },

  beforeDestroy() {
    document.body.style.top = this.prevBodyStyle_top || "0px"
    document.body.style.position = this.prevBodyStyle_position
    document.body.style.width = this.prevBodyStyle_width || "100%"
    document.body.scrollTop = document.documentElement.scrollTop = this.prevBodyStyle_scrollTop || 0
  },

備注： 如果彈窗為一個(gè)獨(dú)立的組件， 那么需要使用v-if來控制彈窗是否顯示，不可使用v-show（因?yàn)槭褂胿-show，會(huì)在主頁面剛生成的同時(shí)生成該組件，導(dǎo)致position=fixed生效，在彈窗關(guān)閉的情況下頁面也禁止滑動(dòng)）

移動(dòng)端如何實(shí)現(xiàn)

1.在彈窗的最外層div上添加@touchmove.stop.prevent (適合彈窗內(nèi)容不需要滾動(dòng)的情況下)


 你要顯示的內(nèi)容

存在問題： 雖然可以阻止滑動(dòng)，但是雙擊的時(shí)候主頁面還是會(huì)跳動(dòng)

2.同PC端第三種方法
3.通過addEventListener解決

mounted() {
        document.body.addEventListener("touchmove", this.p, {passive: false})  
    },
beforeDestroy () {
      document.body.removeEventListener("touchmove", this.p)
    },
methods: {
    p (e) {
         e.preventDefault()
          e.stopPropagation()
      } 
}

劃重點(diǎn)：addEventListener的第三個(gè)參數(shù) {passive: false}

先說說錯(cuò)誤的代碼，網(wǎng)上千篇一律的都是怎么成功的，納悶了,反正我沒有成功，在手機(jī)端和chrome瀏覽器等依然可以正常滾屏：

document.body.addEventListener("touchstart",function(e){
                    e.stopPropagation();
                    e.preventDefault();
                },false);

錯(cuò)誤代碼為什么不行呢，而為什么使用{passive: false}就生效了呢？
摘自MDN的解釋：

passive: Boolean，表示 listener 永遠(yuǎn)不會(huì)調(diào)用preventDefault()。如果 listener 仍然調(diào)用了這個(gè)函數(shù)，客戶端將會(huì)忽略它并拋出一個(gè)控制臺(tái)警告。

MDN對(duì)于上述錯(cuò)誤現(xiàn)象解釋地很清楚：

根據(jù)規(guī)范，passive 選項(xiàng)的默認(rèn)值始終為false。但是，這引入了處理某些觸摸事件（以及其他）的事件監(jiān)聽器在嘗試處理滾動(dòng)時(shí)阻止瀏覽器的主線程的可能性，從而導(dǎo)致滾動(dòng)處理期間性能可能大大降低。
為防止出現(xiàn)此問題，某些瀏覽器（特別是Chrome和Firefox）已將touchstart和touchmove事件的passive選項(xiàng)的默認(rèn)值更改為true文檔級(jí)節(jié)點(diǎn) Window，Document和Document.body。這可以防止調(diào)用事件監(jiān)聽器，因此在用戶滾動(dòng)時(shí)無法阻止頁面呈現(xiàn)。
var elem = document.getElementById("elem"); 
elem.addEventListener("touchmove", function listener() { /* do something */ }, { passive: true });
添加passive:true參數(shù)后，touchmove事件不會(huì)阻塞頁面的滾動(dòng)（同樣適用于鼠標(biāo)的滾輪事件）。
所以，我們可以通過將passive的值顯式設(shè)置為false來覆蓋此行為。 


另外：您無需擔(dān)心基本scroll 事件的passive值。由于無法取消，因此事件監(jiān)聽器無法阻止頁面呈現(xiàn)。（也是在PC端監(jiān)聽scroll無效的原因）
參考鏈接

前兩種方法：https://blog.csdn.net/Chelle1...
第三種：https://blog.csdn.net/yuhk231...
vue prevent方法: https://www.cnblogs.com/Eden-...
mdn關(guān)于addEventListener: https://developer.mozilla.org...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/99623.html

相關(guān)文章

  • 跳出彈窗頁面禁止滾動(dòng)（PC端和手機(jī)端）

    摘要：端如何實(shí)現(xiàn)當(dāng)彈窗顯示時(shí)，為元素添加屬性當(dāng)關(guān)閉彈窗時(shí)移除該屬性即可在彈窗的上設(shè)置你要顯示的內(nèi)容出現(xiàn)彈窗時(shí)，為元素添加，這樣主頁面就禁止滑動(dòng)，同時(shí)很好地解決了彈窗穿透的問題。由于無法取消，因此事件監(jiān)聽器無法阻止頁面呈現(xiàn)。 pc端如何實(shí)現(xiàn) 1.當(dāng)彈窗顯示時(shí)，為body元素添加屬性：overflow：hidden, 當(dāng)關(guān)閉彈窗時(shí)移除該屬性即可2.在彈窗的div上設(shè)置 @scroll.sto...

    atinosun 評(píng)論0 收藏0

  • 禁止蒙層底部頁面跟隨滾動(dòng)

    摘要：但是，在蒙層元素中滑動(dòng)的時(shí)候，滑到內(nèi)容的盡頭時(shí)，再繼續(xù)滑動(dòng)，蒙層底部的頁面會(huì)開始滾動(dòng)，顯然這不是我們想要的效果，因此需要阻止這種行為。部分安卓機(jī)型以及中，無法無法阻止底部頁面滾動(dòng)。為蒙層容器節(jié)點(diǎn)簡(jiǎn)單粗暴，滾動(dòng)時(shí)底部頁面也無法動(dòng)彈了。 場(chǎng)景概述 彈窗是一種常見的交互方式，而蒙層是彈窗必不可少的元素，用于隔斷頁面與彈窗區(qū)塊，暫時(shí)阻斷頁面的交互。但是，在蒙層元素中滑動(dòng)的時(shí)候，滑到內(nèi)容的盡頭時(shí)...

    shiyang6017 評(píng)論0 收藏0

  • 禁止蒙層底部頁面跟隨滾動(dòng)

    摘要：但是，在蒙層元素中滑動(dòng)的時(shí)候，滑到內(nèi)容的盡頭時(shí)，再繼續(xù)滑動(dòng)，蒙層底部的頁面會(huì)開始滾動(dòng)，顯然這不是我們想要的效果，因此需要阻止這種行為。部分安卓機(jī)型以及中，無法無法阻止底部頁面滾動(dòng)。為蒙層容器節(jié)點(diǎn)簡(jiǎn)單粗暴，滾動(dòng)時(shí)底部頁面也無法動(dòng)彈了。 場(chǎng)景概述 彈窗是一種常見的交互方式，而蒙層是彈窗必不可少的元素，用于隔斷頁面與彈窗區(qū)塊，暫時(shí)阻斷頁面的交互。但是，在蒙層元素中滑動(dòng)的時(shí)候，滑到內(nèi)容的盡頭時(shí)...

    kgbook 評(píng)論0 收藏0

  • 禁止蒙層底部頁面跟隨滾動(dòng)

    摘要：但是，在蒙層元素中滑動(dòng)的時(shí)候，滑到內(nèi)容的盡頭時(shí)，再繼續(xù)滑動(dòng)，蒙層底部的頁面會(huì)開始滾動(dòng)，顯然這不是我們想要的效果，因此需要阻止這種行為。部分安卓機(jī)型以及中，無法無法阻止底部頁面滾動(dòng)。為蒙層容器節(jié)點(diǎn)簡(jiǎn)單粗暴，滾動(dòng)時(shí)底部頁面也無法動(dòng)彈了。 場(chǎng)景概述 彈窗是一種常見的交互方式，而蒙層是彈窗必不可少的元素，用于隔斷頁面與彈窗區(qū)塊，暫時(shí)阻斷頁面的交互。但是，在蒙層元素中滑動(dòng)的時(shí)候，滑到內(nèi)容的盡頭時(shí)...

    AbnerMing 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<