今日接手一个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的代码