单页应用移动端弹窗穿透解决终极方案

移动端的web项目，大多数会采用单页应用来实现，在布局上也有一定的讲究，从设计角度出发的话，布局大致分为两类，一类是单页全屏，另外一种是内容多的滚动屏。全屏的话，一般布局会采用vh，position等等方式来实现，而滚动屏又会分为两小类，一类是局部滚动，另外一类是全局滚动，一旦页面出现滚动条，并且此页面有弹窗的需求时，穿透这个问题就来了。

一句话总结穿透就是：弹层下的页面滚动会跟随着弹窗的滚动。要解决这个问题，有很多种方案，尤其是在移动端，比如说，设置overflow： hidden， position: fixed 等，这些方案可以解决，但是有后遗症，直接设置会让页面滚动到头部 ，这个点也是挺令人烦恼的，页面滚动了一定距离之后，弹窗出来了，采用如上方案，页面又滚动回去了。

那如何解决呢，原理也特别简单，以vuejs来举例：

代码如图所示，弹窗出现的时候，给body作fixed定位处理，并记录滚动位置，但弹窗消失时，把定位取消，并将页面滚动到记录位置即可，这种处理方法处理穿透现象时，页面不会有抖动，兼容性极好，不管是全屏滚动 ，还是页面构建了局部的滚动，这种方法都能通用，它的原理，稍为了解dom结构的人，看一眼都能很清楚的知道。
js就是这样一种很有意思的语言， 基础越透彻，越有成就感，哈哈哈