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>