1. 程式人生 > >移動端 滑動表層div時禁止底層div滑動 就是遮罩層

移動端 滑動表層div時禁止底層div滑動 就是遮罩層

在遮罩層新增 @touchmove.prevent

用法

<div v-show="ishow" class="fiex" @touchmove.prevent>
   <div @click="hide" class="hide"></div>
<div  :time_="tim" class="time_body">

如果彈窗不在遮罩層內部,那麼冒泡就不會經過遮罩層,也就無法遮蔽滑動了0.0

    <div class="overlayer" @touchmove.prevent >
    </div>    <div
class="popup">
如果在這個div中滑動,觸發的事件是不會經過overlayer的,也就無法遮蔽滑動了 </div>

如果實在不能把彈窗放到遮罩層內,那麼給彈窗加一個單獨的 .prevent 修飾符也可以,下面這兩種方式都是有效的:

   <!--plan A-->
    <div class="overlayer" @touchmove.prevent><div class="popup">
            如果在這個div中滑動,觸發的事件會經過overlayer,可以遮蔽滑動
        <
/div> </div><div class="overlayer" @touchmove.prevent></div> <div class="popup" @touchmove.prevent> 如果在這個div中滑動,觸發的事件也會被禁用預設行為, 也可以遮蔽滑動 </div>

pc

這種遮蔽方式只是遮蔽了滑動,對於PC端的滑鼠滾輪是無效的,但遮蔽滑鼠滾輪也很簡單,把 touchmove 事件處理器改成 scroll 事件的處理器就好了~就像這樣:

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