三月中旬跳完槽之后就好好久没写博客了，跳到某公司之后，怀揣着满腔热水的我又投入了工作中，从面试、办理离职到入职只用了一个星期。这效率也没谁了，入职之后给了一个小项目，用Vue全家桶开发一个简易的个人博客。因为之前自学了解过，于是很快就上手，原本要求用两周的时间用了三天就完成了全部的功能，于是就一周之后就开始安排到项目组进行实际的开发中了，最后被安排到招聘组负责校招的前端开发。一去就搞事情，给我安排了后台移动端的开发，就是为了方便领导手机上使用，基于内部项目都是用了Vue，最后确定用Vue+一个移动端的基于Vue的UI框架Vux进行开发，于是就进入了移动端的踩坑之旅，之前比较少接触移动端开发。 项目开发是基于Vue的UI框架Vux，其实就是一套基于We-UI的一套移动端UI框架，但根据实际情况，一些布局还是得自己去重构。于是就愉快的踩起了移动端开发的坑。
滚动穿透问题
滚动穿透是指在移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容。网上整理了解决方案，但有些还是存在一定的问题：
设置overflow为hidden
-
.modal-open { -
&, body { -
overflow: hidden; -
height: 100% -
} -
}
即当弹出层弹出时在html上添加.modal-open,禁用 html 和 body 的滚动条,但实际用上就会发现：
-
由于 html 和 body的滚动条都被禁用，弹出层后页面的滚动位置会丢失，需要用 js 来计算原来滚动的位置，在弹出时保持滚动位置；
-
杯具(＞﹏＜)的是页面的背景还是能够有滚的动的效果
js 之 touchmove + preventDefault
-
modal.addEventListener('touchmove', function(e) { -
e.preventDefault(); -
}, false);
即通过阻止移动端touchmove事件，但实际用上会发现弹出层需要滚动时也会被阻止(＞﹏＜)
最后解决方案：position: fixed
-
body.modal-open { -
position: fixed; -
width: 100%; -
}
这种方式同样当弹出层弹出时滚动条会丢失，所以还需要使用js来保存滚动条的位置，在关闭弹出层时将滚动位置还原；
-
var ModalHelper = (function(bodyCls) { -
var scrollTop; // 在闭包中定义一个用来保存滚动位置的变量 -
return { -
afterOpen: function() { //弹出之后记录保存滚动位置，并且给body添加.modal-open -
scrollTop = document.scrollingElement.scrollTop; -
document.body.classList.add(bodyCls); -
document.body.style.top = -scrollTop + 'px'; -
}, -
beforeClose: function() { //关闭时将.modal-open移除并还原之前保存滚动位置 -
document.body.classList.remove(bodyCls); -
document.scrollingElement.scrollTop = scrollTop; -
} -
}; -
})('modal-open');
本人亲测确实比较完美解决了移动端滚动问题