html第一次弹出弹框页面置顶的问题

在写H5的弹框时，发现页面超过一屏且弹框底部有蒙层且在蒙层不可滑动的情况下，第一次弹框弹出页面会置顶，但是随后又恢复正常。经过了多次的试验，先上解决方案：
在css文件中加上如下代码

html,body{
 overflow:auto;
 height:100%;
 -webkit-overflow-scrolling: touch
}

-----------------------------------------------------此为分割线---------------------------------------------

通常在弹框弹出时我们在js里会加上如下代码，以便蒙层不可移动：

$('html,body').css({
       'overflow':'hidden',
       'height':'100%'
  });

但是发现页面超过一屏且弹框底部有蒙层且在蒙层不可滑动的情况下，第一次弹框弹出页面会置顶，但是随后又恢复正常。经发现以下代码可以解决在web端上的问题
只要将html或者body任去一个即可

$('html').css({
          'overflow':'hidden',
          'height':'100%';

    });

但是在移动端上，发现任去一个 overflow:hidden属性失效，页面可以滑动，且弹框的定位是距离顶部的定位而不是当前视野的定位，最佳解决方案：
在css文件中加上如下代码
或者在js文件中为它俩加上这些属性

html,body{
	overflow:auto;
	height:100%;
	-webkit-overflow-scrolling: touch
}

-webkit-overflow-scrolling: touch这句代码解决了height:100%在ios上带来页面滑动卡顿的问题，具体作用效果请自行百度

个人认为 原因如下：
在没有添加height:100%时，浏览器不计页面的高度，只有当页面超过一屏时，页面会出现滚动条，内容会向下堆砌，同时在css样式中弹框距离顶部的距离是并不是距离页面顶部的距离而是距离视野区顶部的距离，所以当我们在js中添加height:100%时页面上滑置顶，而且此时overflow:hidden属性已生效