在扯廢話浪費(fèi)大家的時(shí)間之前，先上個(gè)代碼好了，使用vue實(shí)現(xiàn)起來(lái)很簡(jiǎn)單……

  <div class="overlayer" @touchmove.prevent >
  </div>

對(duì)，就是這么簡(jiǎn)單，加上@touchmove.prevent就可以屏蔽滑動(dòng)頁(yè)面了，然后再和普通的遮罩層一樣，加點(diǎn)樣式

/*遮罩層*/
.overlayer{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:10;
}

如此，便可以了_(:з)∠)_，vue真是好用啊……

以下是廢話和原理

開(kāi)發(fā)移動(dòng)端頁(yè)面的時(shí)候有一個(gè)很比較常見(jiàn)的需求，在出現(xiàn)彈窗時(shí)，禁止滑動(dòng)彈窗后面的主體頁(yè)面； 

實(shí)際上大部分彈窗插件(或者組件)都帶了這樣的功能，所以我自己也從來(lái)沒(méi)研究過(guò)這個(gè)；

 這次的項(xiàng)目突然出現(xiàn)了一個(gè)需要自己寫彈窗的場(chǎng)景……我瞬間就懵逼了QwQ

雖然毫無(wú)思路，但是代碼還是要寫的，效果還是要實(shí)現(xiàn)的，問(wèn)題還是要解決的，而程序員解決問(wèn)題的第一步，自然就是先去百度一下；

 一般來(lái)講吧，普通問(wèn)題都可以直接百度解決，百度不到的再考慮問(wèn)人，屏蔽滑動(dòng)的遮罩層這樣常見(jiàn)的需求，自然是有一大堆的解決方案，不過(guò)……太多了根本沒(méi)法選啊(╯‵□′)╯︵┻━┻

隨便試了一套方案，未果，遂放棄了繼續(xù)嘗試的打算……還是去翻別人的源碼吧。

 首先想到了mint ui中的popup組件;

認(rèn)真閱讀了一下，發(fā)現(xiàn)這個(gè)遮罩層也沒(méi)做什么事情，就是屏蔽了一下touchmove事件，拿到這個(gè)思路再回去自己查了下資料，移動(dòng)端的屏幕滑動(dòng)，實(shí)際上就是touchmove事件的默認(rèn)行為，在冒泡過(guò)程中任何一層阻止這個(gè)默認(rèn)行為，都可以阻止屏幕滑動(dòng)，弄懂原理，實(shí)現(xiàn)起來(lái)就簡(jiǎn)單了，傳統(tǒng)做法是在body上添加一個(gè)touchmove事件處理器，在顯示遮罩層的時(shí)候使用.preventDefault()方法阻止默認(rèn)行為，而vue就更簡(jiǎn)單了，把彈窗之類的都寫在遮罩層元素內(nèi)部，然后直接在遮罩層上加上一個(gè)取消默認(rèn)行為的事件處理器，就可以咯~

注意！

如果彈窗不在遮罩層內(nèi)部，那么冒泡就不會(huì)經(jīng)過(guò)遮罩層，也就無(wú)法屏蔽滑動(dòng)了0.0

  <div class="overlayer" @touchmove.prevent >
  </div>
  <div class="popup">
    如果在這個(gè)div中滑動(dòng)，觸發(fā)的事件是不會(huì)經(jīng)過(guò)overlayer的，也就無(wú)法屏蔽滑動(dòng)了
  </div>

如果實(shí)在不能把彈窗放到遮罩層內(nèi)，那么給彈窗加一個(gè)單獨(dú)的 .prevent 修飾符也可以，下面這兩種方式都是有效的：

  <!--plan A-->
  <div class="overlayer" @touchmove.prevent >
    <div class="popup">
      如果在這個(gè)div中滑動(dòng)，觸發(fā)的事件會(huì)經(jīng)過(guò)overlayer，可以屏蔽滑動(dòng)
    </div>
  </div>

  <!--plan B-->
  <div class="overlayer" @touchmove.prevent >
  </div>
  <div class="popup" @touchmove.prevent>
    如果在這個(gè)div中滑動(dòng)，觸發(fā)的事件也會(huì)被禁用默認(rèn)行為, 也可以屏蔽滑動(dòng)
  </div>

PC端方案

這種屏蔽方式只是屏蔽了滑動(dòng)，對(duì)于PC端的鼠標(biāo)滾輪是無(wú)效的，但屏蔽鼠標(biāo)滾輪也很簡(jiǎn)單，把 touchmove 事件處理器改成 scroll 事件的處理器就好了~就像這樣：

  <div class="overlayer" @scroll.prevent >
  </div>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。