H5开发常见问题及解决方法

滚动条平滑滑动到某个位置
解决方案：添加一个 behavior: 'smooth'

scrollTo({
    left: 0,
    top: 0,
    behavior: 'smooth'
})

input弹出系统的输入框，然后点击完成输入后，滚动条没有归位；
解决方案：监听focusout时间即可；

document.body.addEventListener('focusout', function () {
      window.scrollTo(0, 0);
 })

3.原生js在获取div元素的宽高时通常使用的offsetWidth、offsetHeight等，但是这样获取有一个弊端，这种方式获取的宽高实际上是包含了div的border宽度。有时为了某些效果需要获取div的实际宽高就不能使用offsetWidth，那么原生js如何获取元素的实际宽高呢？
解决方案: 利用下面的函数可以，但是这种情况获取的宽高会有px，需要利用上replace方法

function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];
    }
}

4.如何获取小程序的页面路径？

进入小程序的后台

image.png
搜索下一步之后

image.png

输入已经绑定开发者的账号，然后绑定开启以后，用这个绑定的微信号进入小程序，点击上面的三个小点，就出现了复制链接的功能，复制即可得到了页面路径；

html2canvas 字体重叠的问题?
解决方案：给所处的文字标签加上text-align：'justify'即可解决这个问题。
html2canvas ios 某些版本无法生成图片
解决方案：安装1.0.0-rc.4 这个版本可以解决这个问题；
切换active类名的时候，切换的时候文字样式有bug
解决方案：不要在切换position：relative，直接给元素加上position：relative
ios手机时间处理的时候出现NAN
解决方案：因为时间格式中为‘2020-01-10’，此时应该将格式改为’2020/01/10‘就可以解决问题

9.利用display:flex;做横向布局的时候，最右侧的padding和margin无效；
解决方案：给wapper的最后加一个子元素（伪元素）

.wrapper{
 display: flex;
 overflow-x: auto;
 padding: 0 size(16);
 &:after{
   width: size(16);
   content: "-";
   display: block;
   opacity: 0;
   height: 20px;
 }
}
.item{
  flex-shrink: 0;
}