移动开发遇到的问题

一、关于滚动穿透的问题

滚动穿透是指在移动端当有 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');

二、安卓移动端输入框被键盘挡住问题

通过监听当前窗口的resize，判断当前获取焦点的是否为输入框，调用该元素的scrollIntoView()，然后就可以将输入框显示在可视区域内了。

scrollIntoView()：让当前的元素滚动到浏览器窗口的可视区域内。

if(/Android/.test(navigator.appVersion)) {
   window.addEventListener("resize", function() {
     if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
       document.activeElement.scrollIntoView();
     }
  })
}