js禁止頁面滾動

開發移動端頁面的時候有一個很比較常見的需求，在出現彈窗時，禁止滑動彈窗后面的主體頁面。如何實現呢，往下看

js實現整個頁面禁止滾動：

document.body.addEventListener('touchmove', function(e){
        e.preventDefault();
    }, { passive: false });  //passive 參數不能省略，用來兼容ios和android

passive是干嗎用的呢，設置該屬性的目的主要是為了在阻止事件默認行為導致的卡頓。等待監聽器的執行是耗時的，有些甚至耗時很明顯，這樣就會導致頁面卡頓。即便監聽器是個空函數，也會產生一定的卡頓，畢竟空函數的執行也會耗時。加上{ passive: false }能防止頁面卡頓。

我們可以通過傳遞 passive 為 true 來明確告訴瀏覽器，事件處理程序不會調用 preventDefault 來阻止默認滑動行為。如果設置了passive為true，同時又阻止默認行為，阻止是不生效的

document.addEventListener("touchmove", function(event) {
    event.preventDefault() //不產生作用
}, {passive: true});

 

vue里面直接在html模板里處理：

<div v-show="showSelect" class="bill_class" @touchmove.prevent>
//如果在這個div中滑動，觸發的事件會經過showSelect，可以阻止被該彈框蓋在下面的頁面滑動
</div>

.prevent是VUE里的事件修飾符，用來阻止默認事件，相當於 event.preventDefault()

pc端方案：

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

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