H5移动端开发遇见的东西 (2)

CSS样式如下：

.mask { position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba($color: #333, $alpha: .6); .content { padding: 20px; background-color: #fff; width: 300px; } }

效果如下：

可以看到，当在遮罩上滑动的时候，是会穿透到父节点的，最简单的办法就是阻住默认行为：

document.querySelector(".mask").addEventListener("touchmove", event => { event.preventDefault(); });

如果在vue中，你可以这么写：

<div @touchumove.prevent></div>

如果.content也有滚动条，那么只要阻止遮罩本身就行：

document.querySelector(".mask").addEventListener("touchmove", event => { if (event.target.classList.contains("mask")) event.preventDefault(); });

或者：

<div @touchumove.self.prevent></div>

这样，当出现遮罩的时候用户的滑动就会被锁住啦

最后

参考文章：https://juejin.im/post/5d6e1899e51d453b1e478b29