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

滚动穿透问题

滚动穿透是指在移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容。网上整理了解决方案，但有些还是存在一定的问题：

https://gitlwz.github.io/2018/05/02/vue-move/

设置overflow为hidden

1 2 3 4 5 6

.modal-open { &, body { overflow: hidden; height: 100% } }

即当弹出层弹出时在html上添加.modal-open,禁用 html 和 body 的滚动条,但实际用上就会发现：

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

js 之 touchmove + preventDefault

1 2 3

modal.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);

即通过阻止移动端touchmove事件，但实际用上会发现弹出层需要滚动时也会被阻止(＞﹏＜)

最后解决方案：position: fixed

1 2 3 4

body.modal-open { position: fixed; width: 100%; }

这种方式同样当弹出层弹出时滚动条会丢失，所以还需要使用js来保存滚动条的位置，在关闭弹出层时将滚动位置还原；

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

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