移动端开发技巧总结

移动端开发小技巧：

1，可滚动的弹窗

　之前自己实现这个需求的时候就很头疼，看似简单的需求结果耗费了很长时间，最近看到了别人的总结，根据自己的实践，记录下如下方案。具体思路就是在弹出弹窗时，将body设置为fixed，并且计算出当前的滚动高度，设置为body的top值，然后当关闭弹窗时，取消掉添加在body上的属性，并且，将页面滚动到刚才记录的那个高度就行了，思路是很清晰的，下面就上代码吧。

//css
body.static {
        position: fixed;
        left: 0;
        width: 100%;
      }


// js
 methods: {
    clickHandle() {
      this.isShowPop = true;
      const body = document.body;
      const scrollTop = document.scrollingElement.scrollTop;
      this.scrollTop = scrollTop;
      body.classList.add("static");
      body.style.top = `-${scrollTop}px`;
    },
    closeHandle() {
      const body = document.body;
      const scrollTop = this.scrollTop;
      console.log("----", this.scrollTop);
      body.classList.remove("static");
      body.style.top = "";
      document.scrollingElement.scrollTop = scrollTop;
      this.isShowPop = false;
    },
  },

这个就基本实现了想要的效果了，弹窗中该滚动就滚动。

 

2，输入框输入数字，会导致软键盘顶起页面并且不回弹，这个在ios端出现的概率比较高，当然，解决办法也比较简单，其实和上面的也差不多，贴个代码吧。

var input =document.querySelect('input');
var scrollTop=0;
input.addEventListener('focus',function(){
scrollTop=document.scrollingElement.scrollTop;
})
input.addEventListener('blur',function(){
document.scrollingElement.scrollTo(0,scrollTop);
})

 

 其实看了上面两个就可以发现，这里用到的核心方法就是scrollingElement，看了张鑫旭大神的评测，移动端基本都支持，可以放心使用，桌面端可以使用polyfill https://github.com/mathiasbynens/document.scrollingElement

 3，准备写写移动端适配