移动端显示遮罩禁止滚动

最近开发中遇到这个问题，手写的mask在手机上弹出时，下面被遮挡的部分还可以滚动，这个滚动虽然不影响实际的功能操作，但是看起来不是那么的舒服，而且按照正常的逻辑来说，应该是不可以滚动的，所以就想怎么禁止滚动。自己尝试了一些方法。
1.在弹出mask的时候，设置遮罩下面内容高度为viewport的高度，并设置overflow：hidden，在遮罩隐藏之后再还原高度。
2.第二个方法就是清除浏览器默认行为preventdefault