弹窗阻止页面滚动（纯css）

项目场景：

在写带有遮罩层的弹窗时，弹窗出现时，页面会保持滚动状态，不符合我们的预期

看了些解决方案，大都是改变body的overflow，但是由于滚动条出现和消失，页面也会出现跳动

问题描述：

默认样式下，页面滚动条的父元素是html，而fixed的父元素是body

我的解决方法：

html {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
body {
	width: 100%;
	height: 100%;
	overflow: auto;
}

这个情况下，遮罩层会盖住滚动条
缺点：当有个元素需要绝对定位显示在页面右边，会挡住滚动条，需要手动处理一下

效果图：