移动端H5开发技巧

移动端H5上下拖拽，导致背景跟在滑动

设置body{ overflow:hidden } 就可以了

• 后来发现iphone6机型上并不生效，向下拖拽会看到网页来源，向上拉会看到背景颜色，最后通过设置整个div的position:fixed;不允许上下滑动解决的。

移动端h5页拉起键盘，fixed元素定位失效，并不能吸顶。

原因是，键盘拉起的时候，整个webview向上滚动了，无法控制webview的不允许滚动。

• 解决方案1，键盘拉起时，下面的元素不允许滚动，也就是禁掉页面的mousemove事件。
• 解决方案2，或者用户触碰到键盘以外区域，就让input失焦调，从而达到页面不可滚动的视觉差。

  if (Q.ua.IOS) {
    //阻止默认行为函数
    function preventDefault(e) {
      e.preventDefault();
    }
    document.body.addEventListener(
      "touchmove",
      () => {
        this.$refs.input.blur();
      },
      {
        passive: false,
      }
    );
  
    // window.addEventListener("focusin", (ev) => {
    //   window.scrollTo(0, 0);
    //   this.disabledScroll = true;
    //   // 禁用触摸滚动页面
    //   // document.body.addEventListener("touchmove", preventDefault, {
    //   //   passive: false,
    //   // });
    // });
    // window.addEventListener("focusout", () => {
    //   this.disabledScroll = false;
    //   // 恢复触摸滚动页面
    //   document.body.removeEventListener("touchmove", preventDefault, {
    //     passive: false,
    //   });
    // });
  }

提示弹框显示时，禁止背景滑动，同时背景固定到滑动的位置，而不会因为设置position: fixed跳到顶部

// ****showDialog时****
// 1.设置body的position: fixed; 
// 2. 记录滚动的距离 window.scrollY
Q.$("body").css("top", -window.scrollY + "px");
Q.$("body").css("position", "fixed");

// ***hideDialog时****
// 恢复body的默认属性
Q.$("body").css("position", "");
window.scrollTo(0, -parseInt(Q.$("body").css("top")));
Q.$("body").css("top", "");