刚写了移动端的一个页面，过程中遇到很多问题，现来汇总

1. 滚动事件中获取元素高度问题

该页面用到很多CSS3动画，需要根据元素高度判断动画执行时间。
问题：元素到顶部高度获取不准确！！！

• 原因：引入的自适应屏幕的js导致的。。。因为自适应屏幕需要时间，所以立马获取的目标高度不准确！！！
• 解决办法：将自适应js中的函数在index.js中先执行一下。

//引入的rem.js
window.onload = function(){
  /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
    为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
  getRem(750,100)
};
window.onresize = function(){
  getRem(750,100)
};
function getRem(pwidth,prem){
  var html = document.getElementsByTagName("html")[0];
  var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
  html.style.fontSize = oWidth/pwidth*prem + "px";
}
//自定义的index.js
//先执行一下 getRem(750,100)，再获取高度
getRem(750,100)；
var height=$(".wrpName").offset().top
//此次获取的高度才是真正的高度

2.数字滚动问题

//代码,可以直接拿去用
//css
    div.numbox{
        display:inline-block;
    }
    div.numitem {
        display:inline-block;
        width:2rem;
        height:2rem;
        font-family:微软雅黑;
        font-size:1.5rem;
        overflow:hidden;
        margin-left:1px;
        background-color:#eee;
    }
    div.numvaluebg{
        padding:0px;
        width:100%;
        height:100%;
        position:relative;
    }
    div.numvalue{
        width:100%;
        text-align:center;
        height:100%;
        overflow:hidden;
    }
//js
    function CNumHtmlStruct(id){
        var htmls = [];
        htmls.push("<div class='numbox' id='" + id + "'>");
        for(var i=0; i<6; i++){
            htmls.push("<div class='numitem'>");
            htmls.push("<div class='numvaluebg'>");
            for(var n=0; n<2; n++){
                for(var ii=0; ii<10; ii++){
                    htmls.push("<div class='numvalue'>" + ii + "</div>");
                }
            }
            htmls.push("</div>");
            htmls.push("</div>");
        }
        htmls.push("</div>");
        document.write(htmls.join(""));
    }
    function RefreshNum(id, num){
        var nums = (num + "");
        var box = document.getElementById(id);
        for (var i=0; i<nums.length ; i++)
        {
            var bgbox = box.children[i].children[0];
            var boxstyle = bgbox.style;
            var topv = ( bgbox.children.length-10 + nums.substr(i,1)*1)*100;
            boxstyle.transitionProperty = "all"; 
            boxstyle.transitionDuration = "1s"; 
            boxstyle.transitionTimingFunction = "ease";
            boxstyle.transform = "translateY(-" + topv + "%)";
        }
    }

//html
<div style='margin:100px;border:1px dotted #ccc;padding:20px'> //这个div可以根据自己的需要设置
<script>CNumHtmlStruct('numbox1');</script>
目前总访问人数
<a href='[javascript:void(0)](about:blank)' onclick="RefreshNum('numbox1',520500)">
 刷新
 </a>
</div>

3.a标签在获取焦点时高亮背景的问题
![avatar]（https://images2017.cnblogs.com/blog/1149666/201709/1149666-20170928155953825-1646013407.gif）

a标签下设置该属性即可
-webkit-tap-highlight-color: rgba(0,0,0,0);

4.img与父级div之间的空隙问题

img标签是一个行内块元素，与其他元素之间产生缝隙是因为空格问题，以下是3种解决方法

• 把img标签的display属性改成block：
  img{dispaly:block;}
• 把父级div中的字体大小设为0：
  div{font-size:0;}
• 修改img的vertical-align属性：
  img{vertical-align:buttom;}
  img{vertical-align:middle;}
  img{vertical-align:top;}
  5.暂时先写这么多，回去补