h5页面滚动时跳转到顶部

285 阅读1分钟

今日接手一个h5页面时遇到首页向上滚动一点自动跳转顶部的问题,排查后很久后记录下问题:
错误原因代码:

	
      function getRem(){
        var html =document.getElementsByTagName("html")[0];
        html.style.fontSize="0"
        var owidth =document.body.clientWidth || document.documentElement.clientWidth;
        html.style.fontSize=owidth/7.5+"px";
      }
      window.onload=function(){
        getRem();
        window.addEventListener("resize",getRem,false);
      }

原因是在某些浏览器下向上滚动时,会隐藏顶部的地址框,导致触发了resize事件。而上面代码设置fontSize为0再设置具体的fontSize导致了页面体现为跳转顶部。

解决方案:
1、resize事件只在width发生变化时触发getRem
2、去掉设置fontSize为0的代码