跳出彈窗頁面禁止滾動（PC端和手機端）

pc端如何實現

1.當彈窗顯示時，爲body元素添加屬性：overflow：hidden, 當關閉彈窗時移除該屬性便可
2.在彈窗的div上設置 @scroll.stop.prevent

<div @scroll.stop.prevent>
 你要顯示的內容
</div>

3.出現彈窗時，爲body元素添加position:fixed，這樣主頁面就禁止滑動，同時很好地解決了彈窗穿透的問題。
若彈窗爲獨立組件，能夠採用以下代碼：

beforeMount() {
    // 獲取原來的scrollTop 並將body的top修改成對應的值
    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上光標漂移的問題 將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
  },

備註： 若是彈窗爲一個獨立的組件， 那麼須要使用v-if來控制彈窗是否顯示，不可以使用v-show（由於使用v-show，會在主頁面剛生成的同時生成該組件，致使position=fixed生效，在彈窗關閉的狀況下頁面也禁止滑動）

移動端如何實現

1.在彈窗的最外層div上添加@touchmove.stop.prevent (適合彈窗內容不須要滾動的狀況下)

<div @touchmove.stop.prevent>
 你要顯示的內容
</div>

存在問題： 雖然能夠阻止滑動，可是雙擊的時候主頁面仍是會跳動

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()
      } 
}

劃重點：addEventListener的第三個參數 {passive: false}

先說說錯誤的代碼，網上千篇一概的都是怎麼成功的，納悶了,反正我沒有成功，在手機端和chrome瀏覽器等依然能夠正常滾屏：

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

錯誤代碼爲何不行呢，而爲何使用{passive: false}就生效了呢？
摘自MDN的解釋：

passive: Boolean，表示 listener 永遠不會調用preventDefault()。若是 listener 仍然調用了這個函數，客戶端將會忽略它並拋出一個控制檯警告。

MDN對於上述錯誤現象解釋地很清楚：

根據規範，passive 選項的默認值始終爲false。可是，這引入了處理某些觸摸事件（以及其餘）的事件監聽器在嘗試處理滾動時阻止瀏覽器的主線程的可能性，從而致使滾動處理期間性能可能大大下降。
爲防止出現此問題，某些瀏覽器（特別是Chrome和Firefox）已將touchstart和touchmove事件的passive選項的默認值更改成true文檔級節點 Window，Document和Document.body。這能夠防止調用事件監聽器，所以在用戶滾動時沒法阻止頁面呈現。

var elem = document.getElementById('elem'); 
elem.addEventListener('touchmove', function listener() { /* do something */ }, { passive: true });

添加passive:true參數後，touchmove事件不會阻塞頁面的滾動（一樣適用於鼠標的滾輪事件）。

因此，咱們能夠經過將passive的值顯式設置爲false來覆蓋此行爲。

另外：您無需擔憂基本scroll 事件的passive值。因爲沒法取消，所以事件監聽器沒法阻止頁面呈現。（也是在PC端監聽scroll無效的緣由）

參考連接

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