关于移动端开发中遇到的坑

三月中旬跳完槽之后就好好久没写博客了，跳到某公司之后，怀揣着满腔热水的我又投入了工作中，从面试、办理离职到入职只用了一个星期。这效率也没谁了，入职之后给了一个小项目，用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 的滚动条,但实际用上就会发现：

1. 由于 html 和 body的滚动条都被禁用，弹出层后页面的滚动位置会丢失，需要用 js 来计算原来滚动的位置，在弹出时保持滚动位置；
2. 杯具的是页面的背景还是能够有滚的动的效果

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');

本人亲测确实比较完美解决了移动端滚动问题。